Roundup Tracker - Issues

Message8372

Author rouilj
Recipients rouilj, schlatterbeck
Date 2025-04-10.18:25:38
Message-id <1744309538.83.0.643359024172.issue2551398@roundup-tracker.org>
In-reply-to
More evidence for disabling the number type.

https://open-props-ui.netlify.app/components/inputs/text-field.html#numeric-vs-input-type-
number

recommends Using inputmode=number (with a suitable pattern). This should work for Integer
type although the error input isn't specific enough. It works on chrome but not on firefox
for mobile. Using inputmode=decimal for the Number type runs into the same decimal comma issue.

The recommendation from above is:

=====
You most likely don't need <input type="number">
While <input type="number"> may seem logical for numeric data it should only be used when
mathematical operations are needed on the input (which is... never). Data like credit card
numbers, IDs or social security numbers - are actually text that happen to be numeric rather
than mathematical values. Therefore, consider using <input type="text" inputmode="numeric"
pattern="[0-9]*"> instead.

You will have a bad time.

This triggers the numeric keyboard on mobile devices while avoiding the jank of number
inputs, such as:

  Unexpected value increments from scroll wheels
  Browser-specific validation differences
  Accessibility problems
  Removal of leading zeros
  Allows for some non-numeric mathematical characters
  It should probably be called <input type="math"> instead.

The British Government has a great article
(https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-
type-for-numbers/)
about how bad input number is and goes in-depth. It's a very interesting read. 

====

Even though numbers can actually be intended for calculation (e.g. quantities/counts),
they can also be used for ordering which may not be calculable.

Roundup can still add an option to the config to make a number/integer input
into a plain text input even if we change the implementation to use inputmode.

Getting a numeric keypad on mobile handles 80% of the UX I was trying to get
but it seems only chrome (and safari) based browsers will work.
History
Date User Action Args
2025-04-10 18:25:38rouiljsetmessageid: <1744309538.83.0.643359024172.issue2551398@roundup-tracker.org>
2025-04-10 18:25:38rouiljsetrecipients: + rouilj, schlatterbeck
2025-04-10 18:25:38rouiljlinkissue2551398 messages
2025-04-10 18:25:38rouiljcreate