User Agent: Mozilla/5.0 (Windows NT 5.1; rv:34.0) Gecko/20100101 Firefox/34.0 (Beta/Release) Build ID: 20140824030210 Steps to reproduce: Create a <input type="number">, append it to the DOM, and .focus() it. Actual results: Before receiving the focus event, it receives a blur event. Expected results: The spec (http://www.w3.org/TR/html5/editing.html#dom-focus) doesn't say anything about firing a blur event, and Chrome doesn't do it. Note it works well with other input types. It also works if .focus() is called some time after appending to the DOM (e.g. setTimeout).
I've just experienced another (possibly related?) issue with focus on a number. checking the offsetWidth of an unrelated element seems to trigger focus events on the focused <input type=number> (causing infinite recursion in this case)
Does reproduce in Firefox 37.0.2 on the following fiddle: http://jsfiddle.net/tn71zboe/1/ Calling `focus()` synchronously right after insertion into DOM results in three events: blur, focus, focus. Target fields of all three events point to the same input. Calling `focus()` asynchronously increases probability of expected event (just single focus, without additional blur/focus pair). Approximately at 100ms timeout Firefox works as other browsers (i.e. fires single focus event).
I have an issue that might be related. I have a focused field of a given type. When changing its type to "number", a `blur` and another `focus` event are immediately triggered. Here's a fiddle: https://jsfiddle.net/5gc7upLj/ This could be a separate bug, but it only seems to happen with type="x" to type="number".
(In reply to Jamie Pate from comment #1) > I've just experienced another (possibly related?) issue with focus on a > number. checking the offsetWidth of an unrelated element seems to trigger > focus events on the focused <input type=number> (causing infinite recursion > in this case) Please file a separate bug with a testcase.
(In reply to obrufau from comment #0) > Create a <input type="number">, append it to the DOM, and .focus() it. > > Before receiving the focus event, it receives a blur event. The same thing happens if the element is already in the DOM but display:none, then script changes it to display:block and calls focus() on it.
(In reply to Victor Homyakov from comment #2) > Calling `focus()` synchronously right after insertion into DOM results in > three events: blur, focus, focus. The difference between your example and the original reporters is that the original reporters test is inserting the input element before the document has finished loading, whereas you are inserting it after. That is probably what makes the difference between firing an extra blur vs. extra focus and blur event.
(In reply to Jimmy Gaussen from comment #3) > I have an issue that might be related. I have a focused field of a given > type. When changing its type to "number", a `blur` and another `focus` event > are immediately triggered. That's covered by bug 981248.
Status: UNCONFIRMED → NEW
Ever confirmed: true
See Also: → 981248
Summary: .focus() on a number input fires a blur event → <input type=number> should not fire extra focus/blur events when script focuses it immediately after inserting it into the document or making it visible by removing display:none
In bug 1189748 this issue breaks google.com's search result page (although only if you search for specific formulas and want to alter input in its graph viewer)
jwatt, would you have time to look at this?
I guess I should just admin the answer is no.
This is quite an annoying issue, as DOM insertion includes changing the type. Our use case is for an INTL currency input: - By default be input type="text" for INTL currency formatting, - On focus/click change to input type="number" to benefit from browser number functionality. - On blur change to input type="text" for INTL currency formatting again. In Reactive UI programming this is much hit upon problem: - https://github.com/facebook/react/issues/11062 - https://stackoverflow.com/questions/38770152/firefox-blurs-when-changing-the-input-type And there appears to be multiple related issues on bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=981248 https://bugzilla.mozilla.org/show_bug.cgi?id=1012818
You need to log in before you can comment on or make changes to this bug.