wip - [bugfix] Add dropdown scroll clipping regression test stories#3767
Draft
Myranae wants to merge 3 commits into
Draft
wip - [bugfix] Add dropdown scroll clipping regression test stories#3767Myranae wants to merge 3 commits into
Myranae wants to merge 3 commits into
Conversation
Repro harness for the iPad bug where the bottom-most of several inline dropdowns fails to open. Covers multiple inline dropdowns inside clipped scroll containers and under CSS transform scale, plus a zoom-after-open story that demonstrates the menu detaching from its opener. https://claude.ai/code/session_01DaWpCJGeZDy6ucro6JSEUA
Contributor
|
Size Change: 0 B Total Size: 508 kB ℹ️ View Unchanged
|
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (7260cc3) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3767If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3767If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3767 |
Myranae
changed the title
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.
Summary
Adds a comprehensive Storybook story file for testing and reproducing a reported iPad bug where the bottom-most dropdown in a multi-dropdown question fails to open when positioned near scroll container edges.
Changes
packages/perseus/src/widgets/dropdown/__docs__/dropdown.scroll-clipping-regression.stories.tsxhidemodifier hiding menus when openers escape clipping ancestors)ScrollClip,ZoomWrapper) to simulate the conditions present on iOS devicesKey Stories
overflow: hiddenclippingtransform: scale()ancestor (mimics pinch-zoom)Implementation Details
@khanacademy/perseus-coreto build multi-dropdown questionsplayfunctions that automatically scroll the last dropdown into view and open itvisibility: hiddenon the portaled menu element)disableSnapshot: trueto prevent Chromatic snapshot testinghttps://claude.ai/code/session_01DaWpCJGeZDy6ucro6JSEUA