web-components icon indicating copy to clipboard operation
web-components copied to clipboard

Align dir attribute usage on the overlays with the host element

Open web-padawan opened this issue 1 year ago • 0 comments

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-picker
  • vaadni-select
  • vaadin-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

  1. Add the snippet above to the HTML page
  2. Open the date-picker overlay
  3. Check the overlay dir in dev tools

Environment

Vaadin version(s): 24.x, also earlier versions

Browsers

Issue is not browser related

web-padawan avatar Aug 21 '24 10:08 web-padawan