fix: commit ColorField value on Enter - #10450
Open
grayashh wants to merge 1 commit into
Open
Conversation
grayashh
force-pushed
the
fix/colorfield-commit-on-enter
branch
from
August 11, 2026 07:08
62d6ceb to
6cec2af
Compare
Member
|
Thanks, it all looks good. You just need to sign the CLA with the same e-mail that you're opening this PR from. https://github.com/adobe/react-spectrum/blob/main/CONTRIBUTING.md#contributor-license-agreement |
Author
@snowystinger I've signed! and reopen this PR to re-run CLA check. |
snowystinger
approved these changes
Aug 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #10445
✅ Pull Request Checklist:
Summary
Pressing Enter in a
ColorFieldnow commits the typed value, the same wayNumberFielddoes. Previously the value was only flushed on blur: after typing a hex and pressing Enter, the input displayed the new value while the color state (onChange, swatch, sliders) kept the old one, and dismissing aColorPickerpopover with Escape silently discarded it.Implementation
Mirrors the
useNumberFieldEnter handling (useKeyboardshortcut):flushSync(() => commit()), thencommitValidation(), returning{shouldPreventDefault: false}so implicit form submission still works.commitValidation()is needed on top ofstate.commit()because the empty and unparseable input paths inuseColorFieldState.commit()return early without committing validation. Without it, an empty required field would not be marked invalid before an implicit form submission (as noted in review on fix: commit ColorField value on Enter, matching NumberField behavior (Fixes #10445) #10446).onKeyDown/onKeyUpare destructured out of props, passed touseKeyboard, and explicitly excluded from the props forwarded touseFormattedTextField.useTextFieldalready wires the user's key handlers throughuseFocusable, so forwarding them down both paths makes them fire twice per key press.useNumberFieldavoids this the same way.keyboardPropsis merged first, matching the ordering comment inuseNumberField.Tests are based on the RAC NumberField ones as suggested in review: Enter commits (
onChange+ reformat), Enter on an unparseable value restores the previous value, and a regression test that a useronKeyDownfires exactly once per key press. The two Enter tests fail without theuseColorFieldchange.Relationship to #10446
I reported #10445. #10446 was opened for it, but it doesn't address the review feedback there (missing
commitValidation, no tests), and it forwards the user'sonKeyDown/onKeyUpboth intouseKeyboardand, via...props, intouseFormattedTextField, which double-invokes user key handlers. This PR is an independent implementation covering those points.Separately: that author's account looks a bit odd to me (a crypto wallet address in the bio, and a burst of near-simultaneous PRs across several unrelated repos today), so I wanted the fix for this issue to be in good shape either way. Mentioning it for maintainer awareness; happy to defer if you'd rather land #10446 with fixes.
📝 Test Instructions:
yarn jest packages/react-aria-components/test/ColorField.test.jsruns the three new tests.ColorPicker+ColorFieldcomposition (e.g. the docs example), type a different hex value and press Enter.onChangefires and the swatch/area update immediately; closing the popover with Escape afterwards keeps the color. Tabbing out still commits on blur as before.useColorField, react-statelyuseColorFieldState, S2ColorField, v3ColorField, RACNumberField(97 tests).🧢 Your Project:
Umoh