[SalesForce] lightning-input type=”date” does not open date picker on focus() method

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?

Best Answer

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>

enter image description here

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

Related Topic