fluentui
fluentui copied to clipboard
microsoft
Opening a <Menu> inside an iframe causes parent window to scroll to top in certain conditions
Current Behavior
Issue replicates here: https://codepen.io/radugroza/pen/ZExaLEw
When a <Menu> is opened in an embedded iframe with no scrollbars (iframe height big enough to fit all content), the parent page is auto-scrolled to top (if previously scrolled).
New Behavior
The parent frame doesn't get scrolled when opening the menu
Related Issue(s)
Fixes #
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit 2c596c761da49e0f203be33d51eca63eb8abfd8a:
| Sandbox | Source |
|---|---|
| @fluentui/react 8 starter | Configuration |
| @fluentui/react-components 9 starter | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
192.699 kB52.786 kB |
192.722 kB52.811 kB |
23 B 25 B |
| react-menu Menu (including children components) |
118.866 kB36.006 kB |
118.889 kB36.025 kB |
23 B 19 B |
| react-menu Menu (including selectable components) |
122.065 kB36.499 kB |
122.088 kB36.515 kB |
23 B 16 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react-components react-components: FluentProvider & webLightTheme |
32.688 kB10.736 kB |
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: 66762e1ca870a21db46b72c9b0848c5b107b8e09 (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1668 | 1646 | 5000 | |
| Button | mount | 1181 | 1155 | 5000 | |
| FluentProvider | mount | 1896 | 1906 | 5000 | |
| FluentProviderWithTheme | mount | 715 | 725 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 665 | 696 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 710 | 702 | 10 | |
| MakeStyles | mount | 2286 | 2354 | 50000 | |
| SpinButton | mount | 3272 | 3277 | 5000 |
To add more context to this, @radugroza is one of the contributors of the Fluent UI React website and he discovered this issue through it. If this fix doesn't introduce any regressions it would help both the lib and the website.
@radugroza we are not going to accept changes in this PR in their current state, so I am closing it for housekeeping 🏡
Let's continue discussion on #24651. If there is another approach to solve this issue, feel free to update & reopen this PR. Thanks
