microsoft
[Bug]: Opening a <Menu> inside an iframe causes parent window to scroll to top in certain conditions
Library
React Components / v9 (@fluentui/react-components)
Reproduction
https://codepen.io/radugroza/pen/ZExaLEw
Bug Description
Actual Behavior
Opening a <Menu> inside an iframe causes parent window to scroll to top in certain conditions
This issues has been created from PR #24246
Requested priority
Normal
Products/sites affected
v9 docsite
Are you willing to submit a PR to fix?
no
Validations
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.
As reported by @radugroza, the issue happens when a component is positioned using Floating UI and focused at the same time.
This affects not only Menu but other components as well - Popover, MenuButton.
The cause of the issue seems to be the following:
- any component positioned by Floating UI is first rendered with
position: fixed; top: 0; left: 0 - focusable element inside that component is focused
- correct position of the component is computed, its style is set to reflect the new position.
What happens is that in the step 2, the browser scrolls the focused element into view 🚨.
In Chrome this only happens when the iframe has a cross-domain origin. The scroll does not happen if it is the same-domain origin.
Repro sandbox: https://codesandbox.io/s/cross-domain-iframe-duot2s
This issue is not unique to v9, the same problem is in both v0 and v8.
Check this codesandbox for repro: https://codesandbox.io/s/v0-v8-docsite-iframe-umznbm - Dialog causes the scroll in both libraries, there are other components in both libraries which are experiencing the same problem.
Repro sandbox: https://codesandbox.io/s/cross-domain-iframe-duot2s
The behavior is totally inconsistent across browsers:
- Chrome, Edge 104 scroll in cross-domain but do not in same origin.
- Firefox 104 scrolls in both cases.
- Safari 15.6.1 scrolls in same origin but not in cross-domain.
Another observation: the scroll does not happen in Anchor To Custom Target Menu story where we set the targetRef imperatively.
[backlog triage] sounds like we should keep looking to fix this, this might become a blocker due to use of iframes for embedding/sharing experiences. [removing needs: backlog review]
Hi JustSlone and MS crew.
We (the consultant company that I work for) are using your product for a customer application that is primarily used by IFraming the solution.
We are very much interested in having this change prioritized since the bug is very visbile in our solution that contains lengthy pages with dynamic in- and out folding of sections containing a various amount of elements.
I hope you guys will prioritize this :)
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.
![microsoft-github-policy-service[bot] avatar](https://avatars.githubusercontent.com/in/95686?v=4 "Published by a pub.dev verified publisher"){kind=small}
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.
I recognized the same issue I can reproduce with the combobox: https://stackblitz.com/edit/nbrsaz?file=src%2Fexample.tsx
When you open the combobox, then page is scrolled into top.
This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".
Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.
Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.