From d6bc3bba3ecb9fe14587e4736f1ce9c6702053da Mon Sep 17 00:00:00 2001 From: Peter Ferenczy Date: Tue, 22 Jul 2025 19:38:25 +0300 Subject: [PATCH] Use data attribute to determine safe triangle position --- src/components/menu-item/submenu-controller.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/menu-item/submenu-controller.ts b/src/components/menu-item/submenu-controller.ts index 7dc761239c..d0e1596bc5 100644 --- a/src/components/menu-item/submenu-controller.ts +++ b/src/components/menu-item/submenu-controller.ts @@ -195,16 +195,16 @@ export class SubmenuController implements ReactiveController { private handlePopupReposition = () => { const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']"); const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'sl-menu')[0]; - const isRtl = getComputedStyle(this.host).direction === 'rtl'; + const isOnLeft = this.popupRef.value?.attributes?.['data-current-placement']?.startsWith('left'); if (!menu) { return; } const { left, top, width, height } = menu.getBoundingClientRect(); - this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`); + this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isOnLeft ? left + width : left}px`); this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`); - this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`); + this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isOnLeft ? left + width : left}px`); this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`); };