Skip to content

Add displayWithCommas: 'always' to NumberInput - #4843

Merged
amcclain merged 4 commits into
developfrom
numberInputLiveCommas
Oct 16, 2026
Merged

amcclain merged 4 commits into
developfrom
numberInputLiveCommas

Conversation

@lbwexler

@lbwexler lbwexler commented Oct 13, 2026 •

Copy link
Copy Markdown
Member

Closes #4794. Toolbox companion: xh/toolbox#937.

  • displayWithCommas now accepts 'always' to insert commas while the user types, on desktop and mobile. 'whenBlurred' names the existing behavior, and true remains its alias.
  • New cmp/input/impl/LiveCommas helper, shared by both platforms: groups the leading integer digits and keeps the rest as typed (1,234., -, 1,500k), and restores the caret after each reformat.
  • Backspace/Delete next to a comma remove the digit beyond it. This runs on a native beforeinput listener keyed on inputType, so it also works with mobile soft keyboards, which report keydown as Unidentified.
  • Desktop passes locale: 'en-US' to Blueprint in this mode, so arrow-key steps can parse a comma-formatted value.

Testing: specs cover the helper against a jsdom input. A headless Chrome check confirmed that moving the caret in beforeinput changes which character gets deleted. Checked by hand in Toolbox on desktop: caret while typing mid-value, Backspace/Delete at a comma, arrow steps, paste, and min/max. Still to check: mobile.

Known limits: native undo likely breaks after a reformat.

- 'always' inserts commas while the user types, on desktop and mobile. 'whenBlurred' names the existing behavior, and true remains its alias.
- Shared LiveCommas helper reformats the leading integer digits, keeps the caret after the same digit, and steps over a comma on Backspace/Delete.
- Desktop passes locale 'en-US' to Blueprint in this mode so arrow-key steps can parse a comma-formatted value.

Closes #4794
@github-actions

github-actions Bot commented Oct 13, 2026 •

Copy link
Copy Markdown

✅ Unit tests passed - 1,390 tests

1,390 tests · 120 spec files · 35 packages · 185.0s · commit aabcec7b · numberInputLiveCommas

📊 Full report and all tests · interactive HTML report attached to the run

- skipCommaOnDelete is now a native beforeinput listener keyed on inputType, so it also handles deletes from mobile soft keyboards, which report keydown as 'Unidentified'.
- Moved the CHANGELOG entry from 88.1.0 to 90.0.0-SNAPSHOT.
@lbwexler
lbwexler marked this pull request as ready for review October 14, 2026 17:58
@lbwexler
lbwexler requested a review from Ryanseanlee October 14, 2026 18:24
@lbwexler lbwexler self-assigned this Oct 14, 2026
@lbwexler
lbwexler requested a review from amcclain October 16, 2026 22:11
# Conflicts:
#	CHANGELOG.md
#	desktop/cmp/input/NumberInput.ts
@amcclain
amcclain merged commit 8a93fd4 into develop Oct 16, 2026
5 checks passed
@amcclain
amcclain deleted the numberInputLiveCommas branch October 16, 2026 23:09
amcclain added a commit to xh/toolbox that referenced this pull request Oct 16, 2026
Companion to xh/hoist-react#4843.

- Desktop NumberInput playground: the thousands-separator switch is now a `none` / `whenBlurred` / `always` select.
- Mobile inputs page: new NumberInput row with `displayWithCommas: 'always'`.

---------

Co-authored-by: Anselm McClain <atm@xh.io>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

NumberInput: option to show commas while typing

3 participants