From c1e6017a3c47a8ec50261128c017478a2fb62559 Mon Sep 17 00:00:00 2001 From: Zacky Ma Date: Wed, 17 Jun 2026 15:03:21 -0700 Subject: [PATCH 1/4] fix anchor positioning for RTL --- packages/web-components/src/listbox/listbox.styles.ts | 4 ++-- .../web-components/src/menu-item/menu-item.styles.ts | 11 ++++++++--- packages/web-components/src/menu/menu.styles.ts | 6 +++--- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts index 86a75f60930a77..e5eba76932c479 100644 --- a/packages/web-components/src/listbox/listbox.styles.ts +++ b/packages/web-components/src/listbox/listbox.styles.ts @@ -43,8 +43,8 @@ export const styles = css` position: fixed; max-block-size: var(--listbox-max-height, calc(50vh - anchor-size(self-block))); min-inline-size: anchor-size(inline); - inset-block-start: anchor(end); - inset-inline-start: anchor(start); + inset-block-start: anchor(outside); + inset-inline-start: anchor(inside); position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block; } } diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts index 4b68ad2832a4b2..b28b47b94fe722 100644 --- a/packages/web-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/src/menu-item/menu-item.styles.ts @@ -144,15 +144,20 @@ export const styles = css` position: relative; } + @position-try --inline-inside { + inset-inline-start: unset; + inset-inline-end: anchor(inside); + } + ::slotted([popover]) { margin: 0; max-height: var(--menu-max-height, auto); position: fixed; position-anchor: --menu-trigger; inset: unset; - inset-block-start: anchor(start); - inset-inline-start: anchor(end); - position-try-fallbacks: flip-inline, block-start, block-end; + inset-block-start: anchor(inside); + inset-inline-start: anchor(outside); + position-try-fallbacks: --inline-inside, flip-block, flip-block --inline-inside; z-index: 1; } diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts index 37b258f14e23e2..3b1ad90f56d024 100644 --- a/packages/web-components/src/menu/menu.styles.ts +++ b/packages/web-components/src/menu/menu.styles.ts @@ -17,9 +17,9 @@ export const styles = css` max-height: var(--menu-max-height, auto); position-anchor: --menu-trigger; inset: unset; - inset-block-start: anchor(end); - inset-inline-start: anchor(start); - position-try-fallbacks: flip-block; + inset-block-start: anchor(outside); + inset-inline-start: anchor(inside); + position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; position: fixed; z-index: 1; } From ac88b64d00fd8d31757e5fa81d7fbca4b14d03c8 Mon Sep 17 00:00:00 2001 From: Zacky Ma Date: Wed, 17 Jun 2026 15:05:53 -0700 Subject: [PATCH 2/4] change menu methods to be protected --- .../web-components/docs/web-components.api.md | 16 ++++++++++++++++ packages/web-components/src/menu/menu.ts | 16 ++++++++-------- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md index fef7fb412a6726..66be9343c0d995 100644 --- a/packages/web-components/docs/web-components.api.md +++ b/packages/web-components/docs/web-components.api.md @@ -3195,14 +3195,26 @@ export function listboxTemplate(): ElementViewTemplate; // @public export class Menu extends FASTElement { + // @internal + protected addMenuListListeners(): void; + // @internal + protected addTriggerListeners(): void; closeMenu: (event?: Event) => void; closeOnScroll?: boolean; closeOnScrollChanged(oldValue: boolean, newValue: boolean): void; connectedCallback(): void; disconnectedCallback(): void; + // @internal + protected documentClickHandler: (e: any) => void; focusMenuList(): void; focusTrigger(): void; menuKeydownHandler(e: KeyboardEvent): boolean | void; + // @internal + protected _menuList?: HTMLElement; + // @internal (undocumented) + protected _menuListAbortController?: AbortController; + // @internal + protected _open: boolean; openMenu: (e?: Event) => void; openOnContext?: boolean; openOnContextChanged(oldValue: boolean, newValue: boolean): void; @@ -3222,6 +3234,10 @@ export class Menu extends FASTElement { split?: boolean; toggleHandler: (e: Event) => void; toggleMenu: () => void; + // @internal + protected _trigger?: HTMLElement; + // @internal (undocumented) + protected _triggerAbortController?: AbortController; triggerKeydownHandler: (e: KeyboardEvent) => boolean | void; } diff --git a/packages/web-components/src/menu/menu.ts b/packages/web-components/src/menu/menu.ts index e61ea0279305f8..4826ad882d16d2 100644 --- a/packages/web-components/src/menu/menu.ts +++ b/packages/web-components/src/menu/menu.ts @@ -148,28 +148,28 @@ export class Menu extends FASTElement { * Defines whether the menu is open or not. * @internal */ - private _open: boolean = false; + protected _open: boolean = false; /** * The trigger element of the menu. * @internal */ - private _trigger?: HTMLElement; + protected _trigger?: HTMLElement; /** * The menu list element of the menu which has the popover behavior. * @internal */ - private _menuList?: HTMLElement; + protected _menuList?: HTMLElement; /** * @internal */ - private _triggerAbortController?: AbortController; + protected _triggerAbortController?: AbortController; /** * @internal */ - private _menuListAbortController?: AbortController; + protected _menuListAbortController?: AbortController; /** * Called when the element is connected to the DOM. @@ -356,7 +356,7 @@ export class Menu extends FASTElement { * Adds trigger-related event listeners. * @internal */ - private addTriggerListeners(): void { + protected addTriggerListeners(): void { this._triggerAbortController = new AbortController(); const { signal } = this._triggerAbortController; @@ -376,7 +376,7 @@ export class Menu extends FASTElement { * Adds menu-list event listeners. * @internal */ - private addMenuListListeners(): void { + protected addMenuListListeners(): void { this._menuListAbortController = new AbortController(); const { signal } = this._menuListAbortController; @@ -452,7 +452,7 @@ export class Menu extends FASTElement { * @internal * @param e - The event triggered on document click. */ - private documentClickHandler = (e: any) => { + protected documentClickHandler = (e: any) => { if (!e.composedPath().some((el: any) => el === this._trigger || el === this._menuList)) { this.closeMenu(); } From b2a0d8b110e220a31f3a7fb818c11536caa28361 Mon Sep 17 00:00:00 2001 From: Zacky Ma Date: Wed, 17 Jun 2026 15:10:43 -0700 Subject: [PATCH 3/4] fix split menu --- packages/web-components/src/menu/menu.styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts index 3b1ad90f56d024..e99bac7eaa6f0a 100644 --- a/packages/web-components/src/menu/menu.styles.ts +++ b/packages/web-components/src/menu/menu.styles.ts @@ -18,15 +18,15 @@ export const styles = css` position-anchor: --menu-trigger; inset: unset; inset-block-start: anchor(outside); - inset-inline-start: anchor(inside); + inset-inline-start: anchor(self-start); position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; position: fixed; z-index: 1; } :host([split]) ::slotted([popover]) { - inset-inline-start: auto; - inset-inline-end: anchor(end); + inset-inline-start: unset; + inset-inline-end: anchor(self-end); } ::slotted([popover]:not(:popover-open)) { From 3583175695dae07d0b8de10320c485079362fc0f Mon Sep 17 00:00:00 2001 From: Zacky Ma Date: Wed, 17 Jun 2026 15:14:05 -0700 Subject: [PATCH 4/4] change file --- ...eb-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json diff --git a/change/@fluentui-web-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json b/change/@fluentui-web-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json new file mode 100644 index 00000000000000..1769e6d6bcd619 --- /dev/null +++ b/change/@fluentui-web-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix anchor positioning for rtl", + "packageName": "@fluentui/web-components", + "email": "machi@microsoft.com", + "dependentChangeType": "patch" +}