Repository navigation
Conversation
…iable inheritance TabPanels measured its new size in the same commit that mounted the new panel, before a nested Tabs had rendered its TabList and selected TabPanel, so it animated to the wrong height and snapped at the end. Measure in the next animation frame instead, which still runs before paint. Also define --tab-panel-width/height on every TabPanels so a nested TabPanels does not inherit the outer pixel values mid-transition. Fixes adobe#10292
Member
|
You'll need to sign the CLA https://github.com/adobe/react-spectrum/blob/main/CONTRIBUTING.md#contributor-license-agreement Looks promising. Tested in Chrome and it appears to work well, no more expanding the wrong way then jumping to the final size. |
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
2 participants
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 #10292
TabPanels measures its new size in the same commit that mounts the new panel. A nested Tabs has not rendered its TabList and TabPanel yet at that point, so the outer panel animates to the wrong height and snaps when it resets to auto. Also,
--tab-panel-heightand--tab-panel-widthare only set on the outer TabPanels during the animation, so a nested TabPanels inherits the outer pixel value.The fix measures and starts the transition in a
requestAnimationFramescheduled from the layout effect (still before paint, after the nested collection has flushed), and makes every TabPanels define both variables inline asauto. #10293 only changed the inheritance, which is why it had no visible effect.✅ Pull Request Checklist:
📝 Test Instructions:
New browser test in
Tabs.browser.test.tsx(outer panel 50px, nested Tabs with a 100px panel): passes in Chromium, Firefox and WebKit, fails onmain. Jest Tabs suites: 44/44.Manually:
yarn start-parcel3, openreact-aria-components-tabs--nested-tabs-animated, click Foo, Bar, Baz. Onmainthe outer panel jumps up to 107px in one frame and snaps at the end; here every switch eases to its settled height. Before/after recording attached.🧢 Your Project:
Nclusion