2

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?

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>

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.

2
  • How to open input datepicker dynamically from javascript in LWC? – sri_bb Mar 24 '20 at 11:12
  • Does your onfocus event opens datapicker component to select date? – sri_bb Mar 24 '20 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.