Close date picker onBlur about react-datetime HOT 5 CLOSED

I agree, date picker should close onBlur or onFocusOut of the component.

from react-datetime.

It's not possible to close it on blur because when the user clicks on the calendar, the input loses the focus and it would get closed.

You could try it yourselves with something like:

<DateTime ref="picker" inputProps={{ onBlur: () => this.refs.picker.closeCalendar() }} />

from react-datetime.

This actually covers my use case well. Im mainly concerned when there are multiple DateTime widgets on the screen in a single form and you quickly tab through the form and they all remain open.

I just implemented the above and it works well - however, the next/previous buttons are marked us as button elements so when tabbing the focus goes to these rather than the next field. Is there any particular reason these are buttons given that the rest of the widget doesn't seem to be keyboard accessible? These could be changed to spans.

from react-datetime.

For me the example did not work, I could not select any date anymore. This hack works for me

inputProps={{
    onBlur: () => {
        setTimeout(
            () => this.refs.picker.closeCalendar(),
            100
        )
    }
}}

from react-datetime.

@mleonard87 I think the <button> elements are replaced with <span> elements. I've tried having multiple components on a single page and I can successfully tab between them without anything else but the <input> element getting focus.

Thanks for the solution and comments. I will close this now, if anyone is still having issues just re-open this again.

from react-datetime.