fix(costs): three-decimal currencies stay typable and refunds work on iOS (#2175, #2176)

The split and receipt fields rejected the third decimal a KWD or BHD amount seeds, on desktop and in the mobile sheet, which share the currency-aware guard now. Signed amounts get a sign toggle on the numeric input because the iOS decimal pad has no minus key, and the under/over hint no longer swaps direction for a negative total.
This commit is contained in:
Maurice
2026-09-02 19:00:49 +02:00
committed by Maurice
parent c907e0d5e5
commit 7c857173cf
29 changed files with 199 additions and 34 deletions
@@ -1,4 +1,4 @@
// FE-COMP-NUMINPUT-001 to FE-COMP-NUMINPUT-008
// FE-COMP-NUMINPUT-001 to FE-COMP-NUMINPUT-014
//
// #1513: tapping a pre-populated numeric field put the caret at the end, so the first
// digit typed was appended rather than replacing the value — quantity 1 + "6" = "16".
@@ -16,9 +16,9 @@ beforeEach(() => {
})
afterEach(() => vi.unstubAllGlobals())
function Harness({ initial, mode }: { initial: string; mode?: NumericMode }) {
function Harness({ initial, mode, signToggleLabel }: { initial: string; mode?: NumericMode; signToggleLabel?: string }) {
const [v, setV] = useState(initial)
return <NumericInput value={v} onValueChange={setV} mode={mode} aria-label="field" />
return <NumericInput value={v} onValueChange={setV} mode={mode} signToggleLabel={signToggleLabel} aria-label="field" />
}
describe('NumericInput', () => {
@@ -115,6 +115,47 @@ describe('NumericInput', () => {
expect((screen.getByLabelText('field') as HTMLInputElement).inputMode).toBe('decimal')
})
it('FE-COMP-NUMINPUT-012: the sign toggle flips the sign of what is already there (#2176)', () => {
// iOS renders inputMode="decimal" as a pad of digits, separator and backspace, with
// no minus key, so a refund is untypeable on a phone without this button.
render(<Harness initial="" mode="signed-decimal" signToggleLabel="Toggle sign" />)
const input = screen.getByLabelText('field') as HTMLInputElement
const toggle = screen.getByRole('button', { name: 'Toggle sign' })
fireEvent.change(input, { target: { value: '12,50' } })
fireEvent.click(toggle)
expect(input.value).toBe('-12,50')
expect(toggle).toHaveAttribute('aria-pressed', 'true')
fireEvent.click(toggle)
expect(input.value).toBe('12,50')
expect(toggle).toHaveAttribute('aria-pressed', 'false')
// The button must not take the focus, or the phone keypad closes mid-entry.
expect(fireEvent.mouseDown(toggle)).toBe(false)
})
it('FE-COMP-NUMINPUT-013: an empty field toggles to a bare minus so the digits follow', () => {
render(<Harness initial="" mode="signed-decimal" signToggleLabel="Toggle sign" />)
const input = screen.getByLabelText('field') as HTMLInputElement
fireEvent.click(screen.getByRole('button', { name: 'Toggle sign' }))
expect(input.value).toBe('-')
// The caret stays in the field, so the next keystroke appends to the sign.
fireEvent.change(input, { target: { value: '-1' } })
expect(input.value).toBe('-1')
})
it('FE-COMP-NUMINPUT-014: there is no toggle without a label, and none on an unsigned field', () => {
const { unmount } = render(<Harness initial="" mode="signed-decimal" />)
expect(screen.queryByRole('button')).toBeNull()
unmount()
render(<Harness initial="" mode="decimal" signToggleLabel="Toggle sign" />)
expect(screen.queryByRole('button')).toBeNull()
})
it('FE-COMP-NUMINPUT-009: typing inside the one-frame window is not swallowed by the deferred select', async () => {
// The deferred select() exists for WebKit, but it must not fire *after* the user has
// started typing: it would select the half-typed value and the next character would