Open Bug 981248 Opened 6 years ago Updated 2 months ago
<input> has focus/blur issues when it has focus and its type changes to/from type=number
The first input in the test case switches its type from 'text' to 'number' in its onfocus handler, and switches back in onblur. However, after it switches to number, it no longer accepts any input. This happens because the focus is still on the parent element rather than on the (newly created) anonymous child element. I think the block at  is supposed to fix this problem, but it doesn't actually work because the anonymous child is not bound to the document at that point, so nsFocusManager::SetFocus() fails. SetFocus() wouldn't work in any case, because assuming the anonymous child is focused, the parent input element will get a blur event; during the blur handler, the input type is switched back to text and everything is destroyed; we still don't get a focused number input. I think we have to make some changes to nsFocusManager to fix this.  http://mxr.mozilla.org/mozilla-central/source/layout/forms/nsNumberControlFrame.cpp?rev=63a4ad62401a#359
There are other related issues when changing the type. For example, bug 1057858 comment 3. https://jsfiddle.net/5gc7upLj/
Summary: Input is not focused when switching input type to number on focus → <input> has focus/blur issues when it has focus and its type changes to/from type=number
Here is a version with all the current input types: http://jsfiddle.net/5gc7upLj/2/ This confirms that it only occurs with the number type.
This breaks the "Search by flight number" status functionality on westjet.com's mobile site. (If I had to guess, sites do this because they want the "number" keypad (on mobile), but not the ugly spinners that they can't turn off.)
Bumping up to P3 because this breaks real sites (not sure anyone uses priority values, but all the same...)
Severity: minor → normal
Priority: P4 → P3
Wasted hours tracking this down. Rather subtle. Reported at https://stackoverflow.com/questions/38770152/firefox-blurs-when-changing-the-input-type where it was blamed on AngularJS. However here's a demo of it happening with jQuery. The field can only be edited once in Firefox. https://jsfiddle.net/BobStein/4mL902vo/7/ Changing an input field from text to number causes the field to spontaneously blur.
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
Whiteboard: [webcompat:p3] → [webcompat:p2]
I had this WIP patch around, which simplifies a bunch of stuff and should fix this as well, but needs a bit more work. I didn't want to lose track of it.
Webcompat Priority: --- → P1
You need to log in before you can comment on or make changes to this bug.