onBlur not firing on valid input

See original GitHub issue

Hello! I’ve ran into an issue where onBlur handler’s are not being fired properly when I try to interact with them using fireEvent and normal actions (like click and tab). If I use fireEvent.focus and fireEvent.blur it works fine, but I’d really prefer testing with the standard events.

I saw what looked like a related issue in #359 but that revolved around the input not having type="text, which I’ve covered in my use case.

  • react-testing-library version: 9.1.4
  • react version: 16.9

I’ve created a minimal reproduction case here

https://codesandbox.io/s/onblur-not-working-yv1dv

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:7
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
kentcdoddscommented, Dec 11, 2019

Yes @msurekci, I believe that’s exactly the problem.

I’m afraid there’s nothing we can do here. You’ll need to fire the blur event manually.

2reactions
chrisdhanarajcommented, Dec 11, 2019

Ah makes sense! @kentcdodds Do you think this would be a candidate to get added to the FAQ or potentially the actions documentation page?

Read more comments on GitHub >

github_iconTop Results From Across the Web

onblur event is not firing - javascript - Stack Overflow
To have Onblur on an element it should receive focus first, Div elements don't receive focus by default. You can add tabindex="0"
Read more >
react-hook-form controlled input onblur doesn't work - You.com
In your code, the form mode is onBlur . it means the validation is triggered on blur event (unfocus the input). When you...
Read more >
onblur not firing on input type text - MSDN - Microsoft
1. Add "debugger" in the blur function, like my sample. 2. Open this page in the browser. Hit F12, show the debugger panel ......
Read more >
on blur is not working on <lightning:input
Hello, I have needed to validate input email on blur of text field but i am unable to fire onblur on <lightning:input.
Read more >
Client-side Checking with React.js JSX Events Using onBlur
One common event in HTML is onBlur , wherein an input element loses focus as it is passed to another element. This 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