fix: remove input type from number field #7025
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The basics
npm run format
andnpm run lint
The details
Resolves
Fixes an issue with number fields where the browser doesn't let you enter text https://groups.google.com/g/blockly/c/qksb1qT54Ds
This prevents you from entering hexadecimal numbers or
Infinity
Proposed changes
Remove
input type=number
so that users can enter Infinity and hexadecimal values, including on mobile.Alternatives Considered
Instead of using
input type=number
useinputMode=numeric
. This provides a hint to mobile browsers to show a number keyboard but doesn't enforce the "no text" rule. However, on Android, the keyboard cannot be switched back to the alpha keyboard. There is no setting that matches "This input is normally a number, but still allow the user to type text" so it is simply not possible. See #1595 for more information.https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#aa-numeric
Behavior Before Change
Behavior After Change
Number(val)
returns NaN the value is considered invalid and the input will be red until corrected. This means you can enter hex values and after you finish editing they'll be converted to decimal. This is how it used to work before refactor: Use input type=number for field_number.ts #6845window.prompt
so this change is irrelevantReason for Changes
We need to allow
Infinity
Test Coverage
Tested in browser stack on ios, android, and desktop
Documentation
Additional Information