Skip to content

Conversation

@kaigritun
Copy link

Description

When a NumberField has validation errors (e.g., from Form validationErrors prop), focusing and then blurring the field without changing its value would incorrectly reset the validation state, removing the data-invalid attribute.

Changes

In useNumberField.ts, the onBlur handler now checks if the input value has actually changed from the state's inputValue before calling commitAndAnnounce(). This prevents commit() from being called (and thus commitValidation() from resetting the validation state) when the user simply focuses and blurs without editing.

Reproduction

From issue #9444:

<Form validationErrors={{testNumber: 'foo-bar error!'}}>
  <NumberField name="testNumber">
    <Label>Test Number</Label>
    <Input />
    <FieldError />
  </NumberField>
  <Button type="submit" />
</Form>
  1. Type something in the number field (e.g., "1") and submit
  2. See the error appear
  3. Focus the number field
  4. Blur the number field (without changing the value)
  5. Before fix: Error disappears
  6. After fix: Error remains displayed

Testing

Added a test case that verifies validation errors are preserved when focusing and blurring without changing the value.

All existing NumberField tests pass.

Fixes #9444

…nged

When a NumberField has validation errors (e.g., from Form validationErrors),
focusing and blurring the field without changing its value would incorrectly
reset the validation state, removing the data-invalid attribute.

This fixes the issue by checking if the input value has actually changed
from the state's inputValue before calling commitAndAnnounce() on blur.

Fixes adobe#9444
snowystinger
snowystinger previously approved these changes Feb 9, 2026
Copy link
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thanks for the PR so quickly and for the test!

@snowystinger snowystinger dismissed their stale review February 9, 2026 20:42

doh, spoke too fast, it's failing tests :(

commitAndAnnounce();
// Only commit if the input value has actually changed from the state's input value.
// This prevents validation from being reset when the user focuses and blurs without editing.
if (inputRef.current?.value !== inputValue) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably need to track the previous input value from the last commit, or increment/decrement instead of inputValue, since by the time the user blurs the inputValue will always be the inputRef's current value

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.

NumberField: onBlur event always resets invalidation

2 participants