Skip to content

fix: restore selection indicator styles when transitions are interrupted - #10582

Closed
tjdsksro90 wants to merge 1 commit into
adobe:mainfrom
tjdsksro90:fix/selection-indicator-ssr-strict-mode
Closed

fix: restore selection indicator styles when transitions are interrupted#10582
tjdsksro90 wants to merge 1 commit into
adobe:mainfrom
tjdsksro90:fix/selection-indicator-ssr-strict-mode

Conversation

@tjdsksro90

Copy link
Copy Markdown

The goal is to keep the selection indicator aligned with the initially selected tab after SSR hydration in StrictMode, while preserving selection transitions.

SharedElement temporarily overrides inline transition properties and restores them in the next animation frame. If effect cleanup cancels that frame, the overrides can remain and contaminate the next snapshot. This change reuses the restoration callback during cleanup, before recording the next snapshot.

The browser regression tests cover hydration with and without StrictMode, with either the first or fifth tab initially selected. They wait for hydration to complete before checking alignment and restoration of inline styles. An additional Storybook example exercises animated selection from a non-first tab in StrictMode; the story is client-rendered, while hydration is covered by the browser tests.

AI assistance was used for investigation, implementation, and test preparation. The author review checklist below is intentionally not pre-checked.

Closes #10570

✅ 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 CLAUDE.md.

📝 Test Instructions:

  1. Server-render Tabs with a non-first tab selected and a SelectionIndicator whose transition properties include translate, width, and height.
  2. Hydrate under StrictMode and wait for hydration and the transition to finish.
  3. Confirm the indicator remains aligned with the selected tab and temporary inline transition properties are restored.
  4. Change tabs with the mouse and arrow keys and confirm transitions still work.
  5. The new AnimatedSelectionIndicator story can be used to inspect client-rendered transitions. It is not itself an SSR reproduction.

Validation on Windows, Node 24.19.0:

  • Full yarn test --maxWorkers=2: 372 suites passed, 4 failed; 7,967 tests passed, 16 failed, 16 skipped. The four failing suites were rerun in a separate, unmodified worktree at baseline commit 4dd44e0 and reproduced the same 16 failures: NumberField locale cases, NumberParser property-test initialization, codemod CLI fixture, and locale resolver Windows path expectations.
  • Full yarn test:ssr: 60 suites / 74 tests passed on rerun. An earlier run had timeout failures.
  • Full Chromium browser suite using the repository Vitest configuration with a local Chromium executable override: 149 passed, 1 failed, 9 skipped. The TokenField word-delete shortcut failure also reproduced in the unmodified baseline worktree. Firefox and WebKit have not been run.
  • Full yarn lint: not clean because the Windows CRLF checkout triggers broad format-check failures. Type checking and oxlint passed. An untouched Tabs source file failed formatting in the CRLF checkout and passed in the LF baseline checkout. All three changed files were formatted and checked. No unrelated files were reformatted.
  • Regression sensitivity: temporarily removing the cleanup restoration caused both StrictMode cases to fail on stale inline translate values; restoring it made all six Tabs browser tests pass.
  • Independent Chromium UI checks covered mouse and keyboard interactions at narrow and wide viewport sizes. Touch, RTL, assistive technology, high contrast, and the Storybook runtime have not been manually verified.

🧢 Your Project:

Personal open-source contribution.

@github-actions github-actions Bot added the RAC label Sep 7, 2026
@tjdsksro90 tjdsksro90 closed this Sep 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[RAC] SelectionIndicator remains permanently offset after SSR hydration in StrictMode

1 participant