Repository navigation
fix(Dropdown): mirror the menu placement in a right-to-left context - #299
Merged
Merged
Conversation
On RTL pages the menu opened at bottom-start, a physical left edge, so a dropdown, DatePicker or TimePicker hung off the wrong side of its toggle and dropstart opened on the left. A placement set on c-dropdown is used as given; without it the placement follows direction and the alignment option (the menu's, else the dropdown's) and mirrors in RTL. Dropup with alignment end opens at top-end; side and centered directions keep their side. The placement input has no default; its type is Placement | undefined.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
On RTL pages the dropdown menu opened at bottom-start, a physical left edge, so a dropdown, DatePicker or TimePicker hung off the wrong side of its toggle, and dropstart opened on the left although the docs say directions are mirrored.
A placement set on c-dropdown is now used as given. Without it the placement follows direction and the alignment option (the menu's own, else the dropdown's) and mirrors when the dropdown sits in an RTL context: bottom-end by default, dropstart on the right, dropend on the left, dropup and end alignment swapped. A placement passed in popperOptions is still ignored.
Changes in LTR too: an explicit placement now wins over direction and alignment (before, both overrode it); dropup with alignment end opens at top-end instead of downward; dropend, dropstart and centered directions keep their side with alignment end; alignment end set on cDropdownMenu now moves the menu, not only its class.
The placement input has no default any more, its type is Placement | undefined; the effective default is bottom-start, bottom-end for rtl.
Measured in Chromium on local docs with a pro build, LTR and RTL: dropdown, dropstart, dropend, dropup, end alignment, split button, DatePicker, TimePicker, Autocomplete. RTL menus align to the start edge of the toggle and side directions swap.