Background
OOUI went to great lengths to ensure that floating, flipping, and clipping overlays worked as well in RTL contexts as in LTR ones. We need to meet that same level of support with overlaps in Codex.
Since we don't yet have a Popup component, this task just applies to components that use the Menu component internally.
FloatingUI's RTL support
FloatingUI does provide support out of the box for RTL contexts:
- It detects when the floated element has a computed dir of rtl and adjusts its positioning calculations accordingly. Note that the translate-x value it provides is meant to be applied to the left edge of the container in both LTR and RTL (which is why we need left: 0 on dropdown menus in both directions)
- It's aware of scrollbars being on the left side in RTL contexts
- It flips left and right placements (not applicable here, since menus only open up or down)
Further investigation
So far with this proof-of-concept, we have gotten menu positioning to work in LTR and RTL both inside and outside of Dialogs. However, we should test this further to ensure we have sufficient RTL support, and if shortcomings in FloatingUI arise, we need to handle those situations on our own. Ideally, we could do this via the middleware system provided by FloatingUI.
Testing strategy
- Test Select in a Dialog while scrolling, changing the window size, and a combination of the two
- Test Select in a Dialog that has horizontal scrolling
- Test horizontal clipping of the Select menu (in OOUI, menus are clipped from the end-edge)
- More?
Acceptance criteria
- Complete testing as listed above
- Open new tasks for further fixes if needed
