Skip to content

Commit 18d43a3

Browse files
titustangibleclaude
andcommitted
fix: enable decimal input in Number field
The Number component was rejecting decimal input due to two issues: 1. No `formatOptions` passed to react-aria's `useNumberFieldState` and `useNumberField`, so the NumberParser rejected decimal characters during input validation. 2. The `<input>` value was overridden with `Number.isInteger(state.numberValue) ? state.numberValue : 0`, which collapsed any non-integer to 0 — preventing the user from ever typing a decimal point. Fix: pass memoized `formatOptions` with `maximumFractionDigits: 10` to both hooks (must be memoized — react-stately uses reference equality), remove the value override so react-aria controls the input natively, and expose a `step` prop (default 1) for +/- button increment granularity. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 78106ab commit 18d43a3

File tree

3 files changed

+26
-22
lines changed

3 files changed

+26
-22
lines changed

assets/build/example.min.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

assets/build/index.min.js

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

assets/src/components/field/number/Number.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import {
1+
import {
22
useRef,
3+
useMemo,
34
useState,
45
useEffect
56
} from 'react'
@@ -22,7 +23,10 @@ const NumberComponent = props => {
2223

2324
const { locale } = useLocale()
2425
const [value, setValue] = useState(props.value ?? '')
25-
const state = useNumberFieldState({ ...props, locale })
26+
27+
const defaultFormatOptions = useMemo(() => ({ maximumFractionDigits: 10, useGrouping: false }), [])
28+
const formatOptions = props.formatOptions ?? defaultFormatOptions
29+
const state = useNumberFieldState({ ...props, formatOptions, locale })
2630
const inputRef = useRef()
2731

2832
const {
@@ -32,7 +36,7 @@ const NumberComponent = props => {
3236
inputProps,
3337
incrementButtonProps,
3438
decrementButtonProps
35-
} = useNumberField(props, state, inputRef)
39+
} = useNumberField({ ...props, formatOptions }, state, inputRef)
3640

3741
useEffect(() => props.onChange && props.onChange(value), [value])
3842

@@ -53,10 +57,10 @@ const NumberComponent = props => {
5357
ref={ inputRef }
5458
inputProps={ inputProps }
5559
>
56-
<input
57-
{ ...inputProps}
58-
value={ Number.isInteger(state.numberValue) ? state.numberValue : 0 }
59-
ref={ inputRef }
60+
<input
61+
{ ...inputProps}
62+
step={ props.step ?? 1 }
63+
ref={ inputRef }
6064
name={ props.name ?? '' }
6165
disabled={ isDisabled }
6266
/>

0 commit comments

Comments
 (0)