react
react copied to clipboard
primer
experimental/SelectPanel: Update anchored position after showModal
The problem:
When an html <dialog> is not "open", it has the dimensions of 0px by 0px, which means the anchored position is not able to calculate if the dialog is going beyond the window boundary.
https://github.com/primer/react/assets/1863771/df8c4137-b88d-41ad-a2da-a481b22f340f
Solution
We need to update position after dialog.showModal() has "opened" the dialog and given it dimensions. This, however, creates a new problem of visible layout shift which can look janky.
In Safari, you see the dialog move but it's done before you can tell what happened:
https://github.com/primer/react/assets/1863771/a3e10383-b3a4-4582-8fb4-475a160260b3
In Chrome, you can really see the page glitching because for a tiny moment, Chrome tries to horizontally scroll the page to make sure the dialog is visible:
https://github.com/primer/react/assets/1863771/735fa254-45fe-4cc3-81fc-4428dee9f56c
Polish
We can solve this by adding a minuscule delay to the animating-in, this gives us just enough time to set the correct position (one tick)
https://github.com/primer/react/assets/1863771/03fd228a-7054-4201-8369-7074b04f7b32
🦋 Changeset detected
Latest commit: 15c085331b7d1cb71dc99e3c20399f97a257b1e4
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 1 package
| Name | Type |
|---|---|
| @primer/react | Patch |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
size-limit report 📦
| Path | Size |
|---|---|
| packages/react/dist/browser.esm.js | 88.65 KB (+0.06% 🔺) |
| packages/react/dist/browser.umd.js | 88.81 KB (+0.02% 🔺) |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Note for self: This change seems to break tests (both in this repo and dotcom) where we instantly check if Overlay contents are visible (while they are animating)
Need to reduce the surface area of this change just to SelectPanel
Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.