Skip to content

fix: ensure NumberField validation displays correct errors in React 19 #8491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 7, 2025

Conversation

chirokas
Copy link
Contributor

@chirokas chirokas commented Jul 4, 2025

Closes #6684

Since the change event (which triggers commitValidation) occurs before the blur event (which triggers commit), numberValue remains in its previous state in the update scheduled by commitValidation.

As for why this works as expected in React 18 but not in React 19, I suspect it's related to the refactoring of the React Reconciler.
https://stackblitz.com/edit/vitejs-vite-qsexo8nh?file=README.md

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

expect(input).not.toHaveAttribute('aria-describedby');

Doesn't look like we can test in React Testing Library.

🧢 Your Project:

snowystinger
snowystinger previously approved these changes Jul 5, 2025
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.

Looks like the right change, tested in MacOS Chrome. I think we'll need to do this in useColorField as well, https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/color/src/useColorField.ts#L127
Would you like to handle that in this PR?

snowystinger
snowystinger previously approved these changes Jul 6, 2025
@devongovett
Copy link
Member

Aren't there some cases where the native change event won't fire? I think it doesn't fire when there are programmatic value changes while the field is focused, and then the user blurs. Here's an example: https://stackblitz.com/edit/vitejs-vite-clzjwygv?file=src%2FApp.tsx&terminal=dev. If you focus the input, and then click the change button, then click outside, no change event is fired.

I think maybe we could fix this by calling validation.commitValidation() in NumberFieldState's commit function?

@devongovett devongovett added this pull request to the merge queue Jul 7, 2025
Merged via the queue into adobe:main with commit ef0ddfe Jul 7, 2025
30 checks passed
@chirokas chirokas deleted the numberfield-validate branch July 8, 2025 02:12
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.

RAC NumberField validation broken in next.js
3 participants