lightning-input type="date" does not open date picker on focus() method

Question

When the focus() method is called on lightning-input type="date". it's not opening the date picker but its set the focus on input. Even tried with click() method. If user clicks on input then it will open. https://developer.salesforce.com/docs/component-library/tools/playground/SWVrVnwg/8/edit

app.html

<-- app.html -->
<template>
    <lightning-input type="date" class="date-input" label="date" ></lightning-input>
    <lightning-button label="set focus" title="Non-primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</template>

app.js

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
     handleClick(){
        this.template.querySelector('.date-input').focus();
        // click is not working 
        this.template.querySelector('.date-input').click();
    }
}

is there a known workaround for this?

Answer 1

You have misunderstood the HTMLElement.focus() method. The HTMLElement.focus() method sets focus on the specified element, if it can be focused. In other word, It sets the element as the active element in the current document.

See the code below:-

<template>
    <lightning-input type="date" class="date-input" label="date" onfocus={handlefocus}></lightning-input>
    <lightning-button label="set focus" title="Non-primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>        
</template>

What i have checked here is added onfocus event directly to input field. Whenever you click the button, it fires the onfocus event.