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 not called in 2.11.0

See original GitHub issue

Describe the bug The OnBlur callback does not appear to be being called in 2.11.0

To Reproduce Visit https://reactdatepicker.com/#example-onblur-callbacks-in-console and open the developer console

  1. Interact with the picker and select a date.
  2. No events are logged in the console.
  3. Click the input again (see the cursor is inside the input)
  4. Press tab. Blur event logged.

Expected behavior Blur callback to be called one the input has left focus.

Desktop (please complete the following information):

  • OS: OSX Catalina
  • Browser Chrome
  • Version 79.0.3945.117

Additional context The picker would blur when closed in 1.9.0

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:30
  • Comments:22

github_iconTop GitHub Comments

8reactions
yurivasconceloscommented, Apr 12, 2022

still happening…

3reactions
Alina-githubcommented, Oct 12, 2021

I’ve solved the issue with adding autoFocus as a prop:

<DatePicker  
        autoFocus
        onCalendarClose={handleClose}
        onBlur={handleClose}
        selected={new Date()}
        onChange={handleChange}  />

So that once the datePicker clicked, the focus is set and onBlur will fire.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React on Blur not being called - Stack Overflow
The problem here is that the div you added the onBlur on never receives focus. This results in the onBlur not being fired...
Read more >
React Hook Form - Controller onBlur not called - CodeSandbox
React Hook Form - Controller onBlur not called ... Activating extension 'vscode.typescript-language-features' failed: Could not find bundled tsserver.js.
Read more >
ngBlur - AngularJS: API
Specify custom behavior on blur event. A blur event fires when an element has lost focus. Note: As the blur event is executed...
Read more >
react-datetime/README.md - UNPKG
These dependencies are not installed along with react-datetime automatically ... for when the user clicks outside of the input, simulating a regular onBlur....
Read more >
The difference between onBlur vs onChange for React text ...
onBlur is fired when you have moved away from an object without necessarily having changed its value. onChange is only called when you...
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