Conversation
src/components/ha-button-menu.ts
Outdated
| protected firstUpdated(changedProps): void { | ||
| super.firstUpdated(changedProps); | ||
|
|
||
| this.updateComplete.then(() => { |
There was a problem hiding this comment.
Can we do this only when in rtl mode?
There was a problem hiding this comment.
Done (getting hass with selector - equal to CSS host-context so no big deal).
|
@bramkragten While fixing clickable-list-item I found that the render bug was due to first-child. first-of-type does not have the bug so the whole override is not required anymore. Much cleaner solution now. |
src/components/ha-button-menu.ts
Outdated
| protected firstUpdated(changedProps): void { | ||
| super.firstUpdated(changedProps); | ||
|
|
||
| document.querySelector("home-assistant")!.provideHass(this); |
There was a problem hiding this comment.
Can we use document.dir instead of querying hass?
We can add: document.dir = computeRTL(hass) ? "rtl" : "ltr"; in the translations-mixin
|
|
||
| private _applyTranslations(hass: HomeAssistant) { | ||
| document.querySelector("html")!.setAttribute("lang", hass.language); | ||
| this.style.direction = computeRTL(hass) ? "rtl" : "ltr"; |
There was a problem hiding this comment.
We don't need/use this somewhere now?
There was a problem hiding this comment.
No. I tested it and it works fine when direction is on body and not on home-assistant tag. All my previous fixes will work because host-context would just climb 1 level up.
src/components/ha-button-menu.ts
Outdated
| protected firstUpdated(changedProps): void { | ||
| super.firstUpdated(changedProps); | ||
|
|
||
| // @ts-ignore |
There was a problem hiding this comment.
Why do we need to ignore this?
There was a problem hiding this comment.
Left over from previous code. Removing.
3 participants
Breaking change
Proposed change
mwc-menu and list item do not support RTL.
Further more the style fix needs to be applied to the span within the shadow dom of the list element. The list element is slotted under the menu so there is no way to get to the internal span via plain css in an elegant way.
In addition hovering over the menu causes re-renders due to the ripple which makes any style change to be reset.
The proposed code adds a new style when each menu item is created and then toggles the class on/off whenever an update to a menu item occurs.
It's not elegant but there's no other way that works.
Since MWC is not going to fix their very poor RTL support any time soon, I suggest we accept this change.
Before:
After:
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: