React-datepicker: Datepicker popup doesn't disappear

Created on 4 Oct 2018  路  7Comments  路  Source: Hacker0x01/react-datepicker

Steps to reproduce

  1. Goto https://reactdatepicker.com Second example (Select time)
  2. Click on text field
  3. Select date
  4. Select time

Expected behavior

Datepicker popup disappears after time select

Actual behavior

Datepicker popup disappears and appears back in a moment. Only way to close it is to click somewhere outside

Caught in chrome and safari (os x high sierra)

wontfix

Most helpful comment

Any news on this? Looks like @Sajam's workaround doesn't work anymore.

Edit: forget it, I found out the issue was because the input was inside its own label: when the calendar picker (which was inside the label) got clicked, the label was triggered and the input focused again, causing the picker to pop up again :sweat_smile:

All 7 comments

Tried to replicate this. It disappears like expected for me. If I don't click outside the input and switch tabs then come back, it pops open.

Latest chrome v69x, OS X Mojave.

Just tried on my android tablet (galaxy tab A chrome). Same bug

I see the same issue as well. Select a date, the calendar popup stays in view until you click somewhere outside of the popup. I don't see this issue with the example on reactdatepicker.com but I do see it in my own application.
I've tried with and without setting shouldCloseOnSelect

<DatePicker
dateFormat="YYYY/MM/DD"
selected={moment(this.state.startDate)}
onChange={this.handleDateChange} 
shouldCloseOnSelect={true}
name="startDate"/>

Possible workaround (minimal effort example):

<DatePicker
    ref="timePicker"
    onChange={value => {
        this.refs.timePicker.cancelFocusInput();
    } />

I'm not 100% sure what are (and if there are any) drawbacks of using cancelFocusInput directly, but seems to be OK for me.

Any news on this? Looks like @Sajam's workaround doesn't work anymore.

Edit: forget it, I found out the issue was because the input was inside its own label: when the calendar picker (which was inside the label) got clicked, the label was triggered and the input focused again, causing the picker to pop up again :sweat_smile:

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jcabrerazuniga picture jcabrerazuniga  路  3Comments

ericreis picture ericreis  路  3Comments

formigone picture formigone  路  3Comments

hoodsy picture hoodsy  路  3Comments

carmouche picture carmouche  路  3Comments