fix: restore selection indicator styles when transitions are interrupted - #10582
Closed
tjdsksro90 wants to merge 1 commit into
Closed
fix: restore selection indicator styles when transitions are interrupted#10582tjdsksro90 wants to merge 1 commit into
tjdsksro90 wants to merge 1 commit into
Conversation
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.
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:
📝 Test Instructions:
Validation on Windows, Node 24.19.0:
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.yarn test:ssr: 60 suites / 74 tests passed on rerun. An earlier run had timeout failures.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.🧢 Your Project:
Personal open-source contribution.