Skip to content

fix: commit ColorField value on Enter - #10450

Open
grayashh wants to merge 1 commit into
adobe:mainfrom
grayashh:fix/colorfield-commit-on-enter
Open

fix: commit ColorField value on Enter#10450
grayashh wants to merge 1 commit into
adobe:mainfrom
grayashh:fix/colorfield-commit-on-enter

Conversation

@grayashh

Copy link
Copy Markdown

Closes #10445

✅ 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). (The docs don't describe the Enter behavior for NumberField either, so there is nothing to update.)
  • Looked at the Accessibility Practices for this feature - Aria Practices

Summary

Pressing Enter in a ColorField now commits the typed value, the same way NumberField does. 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 a ColorPicker popover with Escape silently discarded it.

Implementation

Mirrors the useNumberField Enter handling (useKeyboard shortcut):

  • On Enter: flushSync(() => commit()), then commitValidation(), returning {shouldPreventDefault: false} so implicit form submission still works.
  • commitValidation() is needed on top of state.commit() because the empty and unparseable input paths in useColorFieldState.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/onKeyUp are destructured out of props, passed to useKeyboard, and explicitly excluded from the props forwarded to useFormattedTextField. useTextField already wires the user's key handlers through useFocusable, so forwarding them down both paths makes them fire twice per key press. useNumberField avoids this the same way.
  • keyboardProps is merged first, matching the ordering comment in useNumberField.

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 user onKeyDown fires exactly once per key press. The two Enter tests fail without the useColorField change.

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's onKeyDown/onKeyUp both into useKeyboard and, via ...props, into useFormattedTextField, 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.js runs the three new tests.
  • Manual: in any ColorPicker + ColorField composition (e.g. the docs example), type a different hex value and press Enter. onChange fires and the swatch/area update immediately; closing the popover with Escape afterwards keeps the color. Tabbing out still commits on blur as before.
  • Related suites pass locally: react-aria useColorField, react-stately useColorFieldState, S2 ColorField, v3 ColorField, RAC NumberField (97 tests).

🧢 Your Project:

Umoh

@grayashh
grayashh force-pushed the fix/colorfield-commit-on-enter branch from 62d6ceb to 6cec2af Compare August 11, 2026 07:08
@snowystinger

Copy link
Copy Markdown
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

@grayashh grayashh closed this Aug 11, 2026
@grayashh grayashh reopened this Aug 11, 2026
@grayashh

Copy link
Copy Markdown
Author

Thanks, it all looks good. You just need to sign the CLA with the same e-mail that you're opening this PR from. main/CONTRIBUTING.md#contributor-license-agreement

@snowystinger I've signed! and reopen this PR to re-run CLA check.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ColorField: typed value is not committed on Enter and silently discarded on Escape dismissal

2 participants