fix(dropdown): add anchor positioning fallback

Author: radium-v

change/@fluentui-web-components-e3585454-4c4d-4ccf-b7ff-7845614c214f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(dropdown): add anchor positioning fallback logic",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -590,8 +590,6 @@ export class BaseDropdown extends FASTElement {
     changeHandler(e: Event): boolean | void;
     checkValidity(): boolean;
     clickHandler(e: PointerEvent): boolean | void;
-    // (undocumented)
-    connectedCallback(): void;
     // @internal
     control: HTMLInputElement;
     // @internal

packages/web-components/src/dropdown/dropdown.base.ts

@@ -3,8 +3,10 @@ import type { Listbox } from '../listbox/listbox.js';
 import { isListbox } from '../listbox/listbox.options.js';
 import type { DropdownOption } from '../option/option.js';
 import { isDropdownOption } from '../option/option.options.js';
+import { getDirection } from '../utils/direction.js';
 import { toggleState } from '../utils/element-internals.js';
 import { getLanguage } from '../utils/language.js';
+import { AnchorPositioningCSSSupported } from '../utils/support.js';
 import { uniqueId } from '../utils/unique-id.js';
 import { DropdownType } from './dropdown.options.js';
 import { dropdownButtonTemplate, dropdownInputTemplate } from './dropdown.template.js';
@@ -239,6 +241,14 @@ export class BaseDropdown extends FASTElement {
 
         this.setValidity();
       });
+
+      if (AnchorPositioningCSSSupported) {
+        // The `anchor-name` property seems to not be isolated between instances in Safari Technology Preview 220 (18.4).
+        // It's unclear if the spec requires the `anchor-name` to be unique when styled on the `:host`.
+        const anchorName = uniqueId('--dropdown-anchor-');
+        this.style.setProperty('anchor-name', anchorName);
+        this.listbox.style.setProperty('position-anchor', anchorName);
+      }
     }
   }
 
@@ -320,12 +330,9 @@ export class BaseDropdown extends FASTElement {
     this.elementInternals.ariaExpanded = next ? 'true' : 'false';
     this.activeIndex = this.selectedIndex ?? -1;
 
-    if (next) {
-      BaseDropdown.AnchorPositionFallbackObserver?.observe(this.listbox);
-      return;
+    if (!AnchorPositioningCSSSupported) {
+      this.anchorPositionFallback(next);
     }
-
-    BaseDropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
   }
 
   /**
@@ -386,6 +393,18 @@ export class BaseDropdown extends FASTElement {
    */
   public controlSlot!: HTMLSlotElement;
 
+  /**
+   * Event handler for scroll and resize events. Used when the browser does not support CSS anchor positioning.
+   *
+   * @internal
+   */
+  private debouncedReposition = () => {
+    if (this.frameId) {
+      cancelAnimationFrame(this.frameId);
+    }
+    this.frameId = requestAnimationFrame(this.repositionListbox);
+  };
+
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
@@ -410,27 +429,11 @@ export class BaseDropdown extends FASTElement {
   public static formAssociated = true;
 
   /**
-   * Resets the form value to its initial value when the form is reset.
+   * The ID of the frame used for repositioning the listbox when the browser does not support CSS anchor positioning.
    *
    * @internal
    */
-  formResetCallback(): void {
-    this.enabledOptions.forEach((x, i) => {
-      if (this.multiple) {
-        x.selected = !!x.defaultSelected;
-        return;
-      }
-
-      if (!x.defaultSelected) {
-        x.selected = false;
-        return;
-      }
-
-      this.selectOption(i);
-    });
-
-    this.setValidity();
-  }
+  private frameId?: number;
 
   /**
    * A reference to the first freeform option, if present.
@@ -482,6 +485,31 @@ export class BaseDropdown extends FASTElement {
     return this.listbox?.options ?? [];
   }
 
+  /**
+   * Repositions the listbox to align with the control element. Used when the browser does not support CSS anchor positioning.
+   *
+   * @internal
+   */
+  private repositionListbox = () => {
+    const controlRect = this.getBoundingClientRect();
+    const right = window.innerWidth - controlRect.right;
+    const left = controlRect.left;
+
+    this.listbox.style.minWidth = `${controlRect.width}px`;
+    this.listbox.style.top = `${controlRect.top}px`;
+
+    if (
+      left + controlRect.width > window.innerWidth ||
+      (getDirection(this) === 'rtl' && right - controlRect.width > 0)
+    ) {
+      this.listbox.style.right = `${right}px`;
+      this.listbox.style.left = 'unset';
+    } else {
+      this.listbox.style.left = `${left}px`;
+      this.listbox.style.right = 'unset';
+    }
+  };
+
   /**
    * The index of the first selected option, scoped to the enabled options.
    *
@@ -716,6 +744,29 @@ export class BaseDropdown extends FASTElement {
     return true;
   }
 
+  /**
+   * Resets the form value to its initial value when the form is reset.
+   *
+   * @internal
+   */
+  formResetCallback(): void {
+    this.enabledOptions.forEach((x, i) => {
+      if (this.multiple) {
+        x.selected = !!x.defaultSelected;
+        return;
+      }
+
+      if (!x.defaultSelected) {
+        x.selected = false;
+        return;
+      }
+
+      this.selectOption(i);
+    });
+
+    this.setValidity();
+  }
+
   /**
    * Ensures the active index is within bounds of the enabled options. Out-of-bounds indices are wrapped to the opposite
    * end of the range.
@@ -948,13 +999,11 @@ export class BaseDropdown extends FASTElement {
     this.freeformOption.hidden = false;
   }
 
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.anchorPositionFallback();
-  }
-
   disconnectedCallback(): void {
-    BaseDropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
+    BaseDropdown.AnchorPositionFallbackObserver?.disconnect();
+
+    window.removeEventListener('scroll', this.debouncedReposition, { capture: true });
+    window.removeEventListener('resize', this.debouncedReposition);
 
     super.disconnectedCallback();
   }
@@ -979,25 +1028,43 @@ export class BaseDropdown extends FASTElement {
    *
    * @internal
    */
-  private anchorPositionFallback(): void {
-    BaseDropdown.AnchorPositionFallbackObserver =
-      BaseDropdown.AnchorPositionFallbackObserver ??
-      new IntersectionObserver(
+  private anchorPositionFallback(shouldObserve?: boolean): void {
+    if (!BaseDropdown.AnchorPositionFallbackObserver) {
+      BaseDropdown.AnchorPositionFallbackObserver = new IntersectionObserver(
         (entries: IntersectionObserverEntry[]): void => {
           entries.forEach(({ boundingClientRect, isIntersecting, target }) => {
-            if (isListbox(target) && !isIntersecting) {
+            if (isListbox(target)) {
               if (boundingClientRect.bottom > window.innerHeight) {
-                toggleState(target.dropdown!.elementInternals, 'flip-block', true);
+                toggleState(target.elementInternals, 'flip-block', true);
                 return;
               }
 
               if (boundingClientRect.top < 0) {
-                toggleState(target.dropdown!.elementInternals, 'flip-block', false);
+                toggleState(target.elementInternals, 'flip-block', false);
               }
             }
           });
         },
         { threshold: 1 },
       );
+    }
+
+    if (shouldObserve) {
+      BaseDropdown.AnchorPositionFallbackObserver.observe(this.listbox);
+
+      window.addEventListener('scroll', this.debouncedReposition, { passive: true, capture: true });
+      window.addEventListener('resize', this.debouncedReposition, { passive: true });
+      this.debouncedReposition();
+      return;
+    }
+
+    BaseDropdown.AnchorPositionFallbackObserver.unobserve(this.listbox);
+
+    window.removeEventListener('scroll', this.debouncedReposition, { capture: true });
+    window.removeEventListener('resize', this.debouncedReposition);
+    if (this.frameId) {
+      cancelAnimationFrame(this.frameId);
+      this.frameId = undefined;
+    }
   }
 }

packages/web-components/src/dropdown/dropdown.stories.ts

@@ -480,3 +480,14 @@ export const Required: Story = {
     `,
   },
 };
+
+export const OverflowScroll: Story = {
+  render: renderComponent(html<StoryArgs<FluentDropdown>>`
+    <div style="height: 300px; width: 50vw; overflow: scroll; outline: 1px solid black;">
+      <div style="height: 400px;">Scroll down to see the dropdown ↓</div>
+      ${storyTemplate}
+      <div style="height: 400px;"></div>
+    </div>
+  `),
+  args: { ...Default.args },
+};

packages/web-components/src/dropdown/dropdown.styles.ts

@@ -220,38 +220,22 @@ export const styles = css`
     color: ${colorNeutralForegroundDisabled};
   }
 
-  ::slotted([popover]) {
-    inset: unset;
-    position: absolute;
-    position-anchor: --dropdown-trigger;
-    position-area: block-end span-inline-end;
-    position-try-fallbacks: flip-inline, flip-block, block-start;
-    max-height: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
-    min-width: anchor-size(width);
-    overflow: auto;
-  }
-
   ::slotted([popover]:not(:popover-open)) {
     display: none;
   }
 
   @supports not (anchor-name: --anchor) {
-    ::slotted([popover]) {
-      margin-block-start: calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin});
-      max-height: 50vh;
-    }
-
-    :host([size='small']) ::slotted([popover]) {
-      margin-block-start: calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin});
+    :host {
+      --listbox-max-height: 50vh;
+      --margin-offset: calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin});
     }
 
-    :host([size='large']) ::slotted([popover]) {
-      margin-block-start: calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin});
+    :host([size='small']) {
+      --margin-offset: calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin});
     }
 
-    :host(${flipBlockState}) ::slotted([popover]) {
-      margin-block-start: revert;
-      transform: translate(0, -100%);
+    :host([size='large']) {
+      --margin-offset: calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin});
     }
   }
 `;

packages/web-components/src/field/field.styles.ts

@@ -53,7 +53,6 @@ export const styles = css`
     align-items: center;
     gap: 0 ${spacingHorizontalM};
     justify-items: start;
-    position: relative;
   }
 
   :has([slot='message']) {
@@ -101,8 +100,6 @@ export const styles = css`
 
   ::slotted([slot='input']) {
     grid-area: input;
-    position: relative;
-    z-index: 1;
   }
 
   ::slotted([slot='message']) {

packages/web-components/src/listbox/listbox.styles.ts

@@ -1,4 +1,5 @@
 import { css } from '@microsoft/fast-element';
+import { flipBlockState } from '../styles/states/index.js';
 import {
   borderRadiusMedium,
   colorNeutralBackground1,
@@ -29,4 +30,39 @@ export const styles = css`
     row-gap: ${spacingHorizontalXXS};
     width: auto;
   }
+
+  :host([popover]) {
+    inset: unset;
+    overflow: auto;
+  }
+
+  @supports (anchor-name: --anchor) {
+    :host([popover]) {
+      position: absolute;
+      margin-block-start: 0;
+      max-height: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
+      min-width: anchor-size(width);
+      position-anchor: --dropdown;
+      position-area: block-end span-inline-end;
+      position-try-fallbacks: flip-inline, flip-block, --flip-block, block-start;
+    }
+
+    @position-try --flip-block {
+      bottom: anchor(top);
+      top: unset;
+    }
+  }
+
+  @supports not (anchor-name: --anchor) {
+    :host([popover]) {
+      margin-block-start: var(--margin-offset, 0);
+      max-height: var(--listbox-max-height, 50vh);
+      position: fixed;
+    }
+
+    :host([popover]${flipBlockState}) {
+      margin-block-start: revert;
+      translate: 0 -100%;
+    }
+  }
 `;

packages/web-components/src/option/option.styles.ts

@@ -50,6 +50,7 @@ export const styles = css`
     grid-template-columns: auto auto 1fr;
     min-height: 32px;
     padding: ${spacingHorizontalSNudge};
+    text-align: start;
   }
 
   .content {