Skip to content

Fix lost keystrokes in DateRangePicker - #10709

Open
AkashNemade16 wants to merge 6 commits into
adobe:mainfrom
AkashNemade16:akashnemade16-preserve-date-input-across-same-event-bl
Open

AkashNemade16 wants to merge 6 commits into
adobe:mainfrom
AkashNemade16:akashnemade16-preserve-date-input-across-same-event-bl

Conversation

@AkashNemade16

@AkashNemade16 AkashNemade16 commented Oct 3, 2026 •

Copy link
Copy Markdown

Closes #10683

Preserve the last digit when typing a date moves focus to the next field. The issue's zh-TW examples currently produce August 1 instead of August 5, or September 3 instead of September 30.

Typing the last digit of a segment moves focus synchronously. When the next segment is in the other field of a DateRangePicker, the blur runs confirmPlaceholder() in the same event with a stale displayValue. useDateFieldState now keeps the latest displayValue in a ref. The setter updates it synchronously, so confirmPlaceholder reads the latest edit during the same event. A regular useEffect resyncs the ref after rendering, including controlled value changes. No layout effect is added to the date-field state, and Virtualizer remains unchanged.

Regression tests cover automatic focus advancement, invalid-date clamping, controlled/uncontrolled edits, and clearing or replacing a controlled value during an unfinished edit. Existing docs and stories still apply. AI assistance: GitHub Copilot and OpenAI Codex.

✅ 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
  • I understand every change in this PR and can explain why it's there.
  • If AI-assisted, I followed our AI contribution guidance and pointed my assistant at AGENTS.md.

📝 Test Instructions:

The regression coverage includes both fields, leading-zero and invalid days, controlled/uncontrolled edits, displayed and committed values, automatic focus advancement, and clearing or replacing the controlled value during an unfinished edit.

Node 24.15.0, Yarn 4.18.0; review fix at 8fbe96f2e.

Command Result
yarn test --maxWorkers=2 --watchman=false Passed: 385 suites, 8,478 tests, 262 snapshots; 16 tests skipped.
yarn test:ssr --watchman=false Passed: 60 suites, 74 tests.
yarn lint Passed: format check, type check, oxlint, package lint and constraints.
yarn test:browser --project=chromium-desktop --project=webkit-desktop --maxWorkers=1 --no-file-parallelism Not green: 36 files passed, 1 failed, 9 skipped; 294 tests passed, 1 failed, 33 skipped. WebKit opening assertions failed intermittently (Modal, and DateRangePicker in one combined run).

Validation notes: the initial SSR attempt could not bind its local server inside the sandbox; a later run had one startup connection reset, and the complete retry passed. The all-browser run could not connect to Firefox. A full WebKit-only run with the final changes passed 137 tests, skipped 26, and failed the Modal opening test; DateRangePicker passed in that run. One comparison run against the unchanged PR head passed all 138 WebKit tests, so the browser failures remain unresolved rather than being classified as pre-existing. The unit run exited successfully with a worker teardown warning. No Chromatic or manual screen-reader/mobile checks were run.

With locale="zh-TW", type 20260805 or 20260931 without tabbing. Expect August 5 or September 30 after focus advances. Repeat for the end field with a following focusable control inside the picker, and edit 15 to 07.

🧢 Your Project:

N/A - community bug fix.

@AkashNemade16 AkashNemade16 changed the title fix: preserve date input across same-event blur Fix lost keystrokes in DateRangePicker Oct 3, 2026
@AkashNemade16
AkashNemade16 force-pushed the akashnemade16-preserve-date-input-across-same-event-bl branch from 0eabf86 to e8945d6 Compare October 3, 2026 06:01
The React Compiler doesn't allow reassigning the displayValue state
variable inside setDisplayValue. Keep the latest value in a ref that the
setter updates and a layout effect resyncs after each render, and read
it in confirmPlaceholder so a blur in the same event as the keystroke
that moved focus sees the segment that was just typed.

Also hoist the SSR-safe useLayoutEffect from useVirtualizerState into a
shared react-stately util.
@AkashNemade16
AkashNemade16 force-pushed the akashnemade16-preserve-date-input-across-same-event-bl branch from 8b72f09 to cb4680d Compare October 12, 2026 02:33
@yihuiliao yihuiliao added the waiting on author Waiting on Issue Author label Oct 18, 2026
@yihuiliao yihuiliao removed the waiting on author Waiting on Issue Author label Oct 28, 2026
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.

DateRangePicker: keystroke completing a field is lost when the field blurs in the same event (08-05 → 08-01, 09-31 → 09-03)

3 participants