Description
Describe the problem
When in Hebrew or in a right-to-left environment and open a menu dropdown that is near an edge, like document or iframe, the dropdown goes out of bounds.
Reproducible 100% of the time in 6.1.0, initial testing of 6.2.0 has also indicated the same.
How do you reproduce the problem?
I can create codesandbox when asked if you can't reproduce it easily
In LTR:
- Create a dropdown that is on the right side of the screen
- Open dropdown and see dropdown area go out of bounds
In RTL:
- Create a dropdown that is on the left side of the screen with the popper props to tackle LTR issue:
popperProps={{
position: "right"
}}
- Open dropdown and see dropdown area go out of bounds
Expected behavior
- Both LTR and RTL the popper always opens within bounds if no
popperProps.position
is set.
Is this issue blocking you?
Not fully.
We can create a workaround to handle LTR and RTL issue near the edge of the screen, but it will not fix the issue of the dropdown being out of bounds when for example inside an iframe or otherwise in a difficult position to determine beforehand.
The workaround also requires changes throughout the codebase. We can change popperProps.position
based on if the document is rtl or ltr. However, this requires us synchronizing iframes and our Cockpit shell which I personally don't know how yet.
Screenshots
Popper sometimes also changes screen resolution to fit, this is unclear as to how it is reproducible. Seems to be flaky and it sometimes goes out of bounds and sometimes scales the frame.
data-popper-escape
says it did not escape:
If applicable, add screenshots to help explain the issue.
What is your environment?
- OS: Fedora Linux
- Browser Chromium
- Version 135
What is your product and what release date are you targeting?
Any other information?
Metadata
Metadata
Assignees
Type
Projects
Status