1

Is there a way to set focus on input field when SingleDatePicker closes? The problem is the input is tied directly to the Calendar, so whenever a user clicks on the input field, it automatically renders the Calendar as well.

Current Implementation:

<SingleDatePicker
    date={this.state.date} 
    onDateChange={date => this.setState({ date })}
    focused={this.state.focused}
    onFocusChange={({ focused }) => this.setState({ focused })}
    onClose=(() => ???)   // what can I do here to set focus on input?
    id="singleDatePicker"
/>

Basically I want to focus on the highlighted input when date is selected (as shown in the image below).

enter image description here

http://airbnb.io/react-dates/?path=/story/sdp-day-props--with-custom-daily-details

jyoo
  • 47
  • 1
  • 6

1 Answers1

0

Handle it by using DOM manipulation as below

setTimeout(() => document.getElementById('singleDatePicker').focus(), 100)

Pradip Kakade
  • 11
  • 3