question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onBlur is not called when day is clicked after v2.12.0

See original GitHub issue

Describe the bug

onBlur is not called when day is clicked and closed the calendar after v2.12.0.

To Reproduce

  1. Click input form and open calendar.
  2. Click the day.
  3. 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

react-datepicker_v2 12 0

v2.11.0

react-datepicker_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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:13
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
jaredwindovercommented, Apr 13, 2020

I realized you can use the onCalendarClose handler to workaround this (at least in my case).

1reaction
Naghalcommented, May 7, 2020

I can reproduce this in my project. However, for me onCalendarClose is never called.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found