onBlur is not called when day is clicked after v2.12.0
See original GitHub issueDescribe the bug
onBlur is not called when day is clicked and closed the calendar after v2.12.0
.
To Reproduce
- Click input form and open calendar.
- Click the day.
- Confirm browser debug console.
Sample code
import * as React from 'react';
import DatePicker from 'react-datepicker';
import * as moment from 'moment';
export const SampleDatePicker = () => {
const handleChange = React.useCallback((next: Date) => {
console.log('> change', moment(next).format('YYYY/MM/DD'));
}, []);
const handleSelect = React.useCallback((next: Date) => {
console.log('> select', moment(next).format('YYYY/MM/DD'));
}, []);
const handleBlur = React.useCallback(() => {
console.log('> blur');
}, []);
return <DatePicker onChange={handleChange} onSelect={handleSelect} onBlur={handleBlur} />;
};
Expected behavior
onBlur is called when day is clicked, it is same behavior as before v2.11.0
.
Screenshots
v2.12.0
v2.11.0
Note
- Sorry for using unreleased version, after
v2.12.0
. 🙇- I only checked the latest version with
npm info react-datepicker versions
.
- I only checked the latest version with
Issue Analytics
- State:
- Created 4 years ago
- Reactions:13
- Comments:8 (1 by maintainers)
Top Results From Across the Web
React - ul with onBlur event is preventing onClick from firing on li
I tested it in this jsfiddle and while there is no code to show and hide the menu, it seems as if adding...
Read more >Using the 'onblur' event in JavaScript - YouTube
The ' onblur ' event in JavaScript allows you to react whenever an input field loses focus - this is especially useful in...
Read more >datePicker acting odd when passed onBlur and onFocus
The issue occurs because when the second DatePicker is opened its Calendar is also focused. This caused the first DatePicker to blur and...
Read more >I want to cover the onBlur event in javascript by writing JEST ...
First off: div elements don't receive focus by default, so you can't register an onblur event unless you first add tabindex="0" or ...
Read more >Angular 10 (blur) Event - GeeksforGeeks
The blur event is triggered when an element loses its focus. Syntax: <input (blur)='functionName()'/>. NgModule: Module used by blur event is:.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I realized you can use the
onCalendarClose
handler to workaround this (at least in my case).I can reproduce this in my project. However, for me
onCalendarClose
is never called.