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 event is being called incorrectly on a focused input field when focus is called several times
See original GitHub issueBasic info:
- Node.js version: 10.14.1
- jsdom version: 15.1.1
Minimal reproduction case
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = new JSDOM(`
<input
type="text"
id="foo"
onfocus="console.log('foo input field - onfocus event handler is fired')"
onblur="console.log('foo input field - onblur event handler is fired')"
/>`).window;
getFooInputElement = () => document.getElementById("foo");
// Attached event listeners
getFooInputElement().addEventListener(
"focus",
() => console.log("foo input field - heard browser focus event"),
{ capture: true }
);
getFooInputElement().addEventListener(
"blur",
() => console.log("foo input field - heard browser blur event"),
{ capture: true }
);
// Execute
console.log("Calling 'focus()' on foo input field");
getFooInputElement().focus();
console.log(
"\nCalling on focus on the same foo input field which has focused already"
);
getFooInputElement().focus();
console.log(
"Result/Issue: As we can see, `onBlur` event is fired when we call 'focus()' on the focused foo input field."
);
Here’s a link to my repo which I created and you can run the script and check out the above result.
How does similar code behave in browsers?
I have tested the same code in normal browser and the result is different i.e. onBlur is event not being fired on a focused input when focus() is called multiple times on the same input. I have also created this sandbox example to prove that.
It would be much appreciated if you can take a look at the issue.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:5
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Invoking the focus method causes onblur to fire endlessly
Using alert() removes focus from the active element which causes blur to trigger. Thereby, according to your script , blur triggers ...
Read more >onBlur event triggers when trying to set focus on input[type ...
When trying to render input[type="number"] with active focus on ... Only reason I ask is that focus and blur get attached at the...
Read more >666205 - onblur event is going to infinite loop. - Monorail
I wonder why we get onblur event when alert() dialog gets dismissed. box.focus() gets the box to be focused first, then it ends...
Read more >Focusing: focus/blur - The Modern JavaScript Tutorial
The focus event is called on focusing, and blur – when the element loses the focus. Let's use them for validation of an...
Read more >blur | Cypress Documentation
Blur a focused element. It is unsafe to chain further commands that rely on the subject after .blur() . This element must currently...
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
Slightly more terse repro case:
prints:
The following browsers do not call blur handler in this case (per this fiddle):
Relevant spec: either step 5 of https://html.spec.whatwg.org/multipage/interaction.html#focusing-steps or step 1 of https://html.spec.whatwg.org/multipage/interaction.html#focus-update-steps
Thanks, yeah, @eps1lon fixed this in https://github.com/jsdom/jsdom/commit/d8bede1fc532729b3951d53201a021648555140a.