React-datepicker: Date picker not closed after date selection.

[kaushikbarodiya]

If I change the month and then select the date sometime calendar doesn't close.
To replicate the issue change month and select date.
For mobile browser, it doesn't close always.

[rafeememon]

Does this work on the demo site? Are there any console errors? Can you link to an app that shows this problem?

[andreechristian]

It is happening to me on mobile only.. After a little debugging, i found these functions triggering on desktop (the correct one):
handleBlur
deferFocusInput
cancelFocusInput
handleFocus -> most likely from deferFocusInput -> setOpen : true
handleSelect -> setOpen : false

while in mobile i got following order :
handleBlur
deferFocusInput
cancelFocusInput
handleSelect -> setOpen : false
handleFocus -> most likely from deferFocusInput -> setOpen : true

was using chrome 53.0.2785.143 (64-bit) on mac, toggling the responsive on and off.

[kaushikbarodiya]

Yeah this issue persist only in mobile. On desktop it works fine.

On Mon, Oct 24, 2016 at 9:42 AM, andreechristian [email protected]
wrote:

It is happening to me on mobile only.. After a little debugging, i found
these functions triggering on desktop (the correct one):
handleBlur
deferFocusInput
cancelFocusInput
handleFocus -> most likely from deferFocusInput -> setOpen : true
handleSelect -> setOpen : false

while in mobile i got following order :
handleBlur
deferFocusInput
cancelFocusInput
handleSelect -> setOpen : false
handleFocus -> most likely from deferFocusInput -> setOpen : true

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Hacker0x01/react-datepicker/issues/597#issuecomment-255644434,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMVQMC6NL6R9Z91vz9AWFaUYuh59lwM5ks5q3DAkgaJpZM4Kb1oY
.

[kaushikbarodiya]

There were no console errors. You can recreate the problem on example site
itself.

1. Toggle the device from web to mobile.
2. Try to select date in first example itself.You will find date picker
   doesn't close after selecting particular date.

Please let me know in case you are not able to recreate.

On Fri, Oct 21, 2016 at 7:21 PM, Rafee Memon [email protected]
wrote:

Does this work on the demo site? Are there any console errors? Can you
link to an app that shows this problem?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Hacker0x01/react-datepicker/issues/597#issuecomment-255382370,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMVQMJ3PyT-RYMiOrT3PkmW689tZvAV9ks5q2MNNgaJpZM4Kb1oY
.

[cyrusbowman]

+1 I have the same issue, I am NOT on mobile. I'm almost positive the date selector used to close after selecting a date in earlier versions. Also note if using a custom input it DOES close after selecting a date.

Not Closing After Selection:

Custom Input DOES Close After Selection:

[kaushikbarodiya]

Yes, I liked the idea of Mahammed. In this way we will have more control
over the component.

On Tue, Nov 8, 2016 at 5:49 PM, Mahammed Zishan Khan <
[email protected]> wrote:

Maybe it's better to add a property which allows it to stay open when you
select a date? On false it should just autoclose.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Hacker0x01/react-datepicker/issues/597#issuecomment-259122462,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMVQMJvjuobkXju4sx8uc4GbJ_3Z-i-Nks5q8GjqgaJpZM4Kb1oY
.

[splendidtrade]

@kaushikbarodiya: were you able to solve this issue on mobile, please let me know.

[timwilkbrandt]

Device: was iPad

I had the same problem, further compounding my ordeal was that we're using typescript and the react-datepicker component does not have the complete suite of typings available. In lieu of creating my own typings I decided to leverage what i had available, which basically boiled down to the onChange event and the refs.

this led to the following solution within the onChange eventHandler:

this.props.handleStartDateChange(date) //saving date to state
let temp = this
setTimeout(function(){
if (temp.refs.datepicker1.refs.calendar) {
temp.refs.datepicker1.refs.calendar.handleClickOutside()
}
}, 500)

Hope this helps someone.

[ghost]

I am also facing the same issue on Android and IOS, date pickers are not getting close after date selection, it gives the flicker effect after choosing date but it dosen't close.

[timwilkbrandt]

@jvarshaprdxn you can either use the trick i listed above, but that was more due to the fact that I was using typescript and the typings did not support custom input. Or you can use the custom input type which we tested on the ipad and appeared to work:
https://hacker0x01.github.io/react-datepicker/#example-29
Best of luck,
Tim

[ghost]

@timwilkbrandt Thanks.
I have updated to version 0.43 and it is working now properly as expected.

[dfahlander]

This happens for me on chrome desktop. After navigating to next month and clicking a date, the onChange event does not trigger, but the calendar quickly closes and reopens. Then clicking a second time triggers the change event and calendar is closed. I am on version 1.3.0. Also had the issue on version 1.2.1. Not tested earlier versions. React popper versions: 0.8.2 and 0.8.3.

[dfahlander]

I've narrowed down the issue to reproduce it. It's actually even reproducable on the project's main page example.

Repro:

1. Use Chrome or Opera (not tested other browsers)
2. Go to https://reactdatepicker.com
3. Decrease the hight of your browser-window, so that the calendar needs to show over the input field instead of under it.
4. Navigate to September 2018:
   
5. Select september 19.
6. Navigate back to August 2018
7. Try to select August 15.

Expected behavior: Date should be selected (onChange triggered) and calendar close down.

Actual behavior: The calendar is re-rendered but no date selected yet (no onChange triggered)

[aij]

@dfahlander You seem to be running in to #361 .

[pbreah]

I tested this on mobile, and it still happens on the latest release 1.6.0

I wanted to share a simpler solution: add the prop preventOpenOnFocus to true. It works as expected on mobile.

[stale[bot]]

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.

[ankitkapoor2493]

Still facing this issue in 16.9.0 version

[olayenca]

My DatePicker on desktop was wrapped inside a label and wont close on select, calling event.preventDefault() in onChange resolved mine.
https://github.com/Hacker0x01/react-datepicker/issues/1012#issuecomment-515350758

[stale[bot]]

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.