web-components
web-components copied to clipboard
Align dir attribute usage on the overlays with the host element
Description
Currently, components like vaadin-date-picker-overlay do not respect custom dir set on the host element.
The only case that supports this is vaadin-combo-box-overlay that uses custom logic for this:
https://github.com/vaadin/web-components/blob/451c32862bbbc5f59d71ea7dec29cad90c1ce8bd/packages/combo-box/src/vaadin-combo-box-overlay-mixin.js#L28-L33
Note: prior to #7677 the dir was set based on getComputedStyle(this).direction. This logic is now removed to enable using globally set dir attribute value on overlay based components. But we probably should also check host dir.
Expected outcome
Expected the dir='rtl' to be set on the overlay when provided on the host element by components such as:
vaadin-date-pickervaadni-selectvaadin-menu-bar
Note: the vaadin-time-picker is a special case since it enforces dir='ltr' on the overlay by design.
Minimal reproducible example
<vaadin-date-picker label="Start date" dir="rtl"></vaadin-date-picker>
Steps to reproduce
- Add the snippet above to the HTML page
- Open the date-picker overlay
- Check the overlay
dirin dev tools
Environment
Vaadin version(s): 24.x, also earlier versions
Browsers
Issue is not browser related