web: keep the search-select dropdown inside its modal (#24812)

dominic-r · claude · authentik-cherry-pick[bot] · commit a65ea8149012 · 2026-08-07T16:36:28.000Z
* web: keep search-select popover inside its dialog and dedupe file upload entry points

Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;

* web: prevent focus auto-scroll from shifting the search-select anchor while placing the menu

Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;

* web: always place the search-select menu below its anchor

Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;

* web: add back

---------

Co-authored-by: Claude Fable 5 &lt;noreply@anthropic.com&gt;
diff --git a/web/src/admin/files/FileListPage.ts b/web/src/admin/files/FileListPage.ts
@@ -10,7 +10,6 @@ import { docLink } from "#common/global";
 
 import { ModalInvokerButton } from "#elements/dialogs";
 import { WithCapabilitiesConfig } from "#elements/mixins/capabilities";
-import { getURLParam } from "#elements/router/RouteMatch";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
@@ -20,7 +19,7 @@ import { FileUploadForm } from "#admin/files/FileUploadForm";
 import { AdminApi, CapabilitiesEnum, FileList, UsageEnum } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, PropertyValues, TemplateResult } from "lit";
+import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 export type FileListItem = Pick<FileList, "name" | "url" | "mimeType">;
@@ -41,14 +40,6 @@ export class FileListPage extends WithCapabilitiesConfig(TablePage<FileListItem>
     @property({ type: String, useDefault: true })
     public order: FileListOrderKey = "name";
 
-    public override firstUpdated(changed: PropertyValues<this>): void {
-        super.firstUpdated(changed);
-
-        if (getURLParam("upload", false) && this.can(CapabilitiesEnum.CanSaveMedia)) {
-            FileUploadForm.showModal();
-        }
-    }
-
     async apiEndpoint(): Promise<PaginatedResponse<FileListItem>> {
         const api = aki(AdminApi);
         const items = await api.adminFileList({
diff --git a/web/src/elements/dialogs/positioning.ts b/web/src/elements/dialogs/positioning.ts
@@ -15,3 +15,115 @@ export const AnchorPositionSupported: boolean =
  */
 export const AnchorSizeSupported: boolean =
     CSS.supports("width", "anchor-size(width)") && !isFirefox();
+
+/**
+ * Tallest an anchored popover may grow, as a fraction of the viewport.
+ */
+const MAX_POPOVER_VIEWPORT_RATIO = 0.4;
+
+/**
+ * Breathing room kept between an anchored popover and the edge of its boundary.
+ */
+const BOUNDARY_INSET = 8;
+
+/**
+ * Shortest popover worth rendering. Inside a boundary too small for even this, the popover
+ * overhangs rather than collapsing into an unusable sliver.
+ */
+const MIN_POPOVER_HEIGHT = 128;
+
+/**
+ * Walk the flattened (composed) tree upward from `node`, crossing shadow boundaries and
+ * slots.
+ */
+export function* composedAncestors(node: Node): Generator<HTMLElement> {
+    const composedParent = (current: Node): Node | null => {
+        const slot = (current as Element).assignedSlot;
+        if (slot) return slot;
+
+        const parent = current.parentNode;
+        return parent instanceof ShadowRoot ? parent.host : parent;
+    };
+
+    for (let current = composedParent(node); current; current = composedParent(current)) {
+        if (current instanceof HTMLElement) yield current;
+    }
+}
+
+function scrollableY(element: HTMLElement): boolean {
+    const { overflowY } = getComputedStyle(element);
+
+    return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+}
+
+/**
+ * The nearest vertically scrollable ancestor of `node`, crossing shadow boundaries.
+ */
+export function findScrollableAncestor(node: Node): HTMLElement | null {
+    for (const ancestor of composedAncestors(node)) {
+        if (scrollableY(ancestor) && ancestor.scrollHeight > ancestor.clientHeight) {
+            return ancestor;
+        }
+    }
+
+    return null;
+}
+
+/**
+ * The vertical band an anchored popover has to stay within: the dialog containing its
+ * anchor, or the viewport when the anchor isn't in one.
+ *
+ * @remarks
+ * A popover renders in the top layer, positioned against the viewport, so nothing clips it
+ * to the dialog it belongs to — without this it overhangs the dialog's edges and paints
+ * over the backdrop.
+ */
+export function popoverBoundaryBand(anchor: Node): { top: number; bottom: number } {
+    const viewportHeight = window.innerHeight;
+
+    for (const ancestor of composedAncestors(anchor)) {
+        if (!(ancestor instanceof HTMLDialogElement)) continue;
+
+        const rect = ancestor.getBoundingClientRect();
+
+        return {
+            top: Math.max(0, rect.top),
+            bottom: Math.min(viewportHeight, rect.bottom),
+        };
+    }
+
+    return { top: 0, bottom: viewportHeight };
+}
+
+export interface AnchoredPopoverPlacementOptions {
+    /**
+     * Size the popover to its anchor's width. Menus that belong to a text input want this;
+     * free-standing menus size themselves.
+     */
+    matchAnchorWidth?: boolean;
+}
+
+/**
+ * Place a top-layer popover directly under its anchor, never taller than the space its
+ * boundary leaves below the anchor.
+ */
+export function placeAnchoredPopover(
+    anchor: HTMLElement,
+    popover: HTMLElement,
+    { matchAnchorWidth }: AnchoredPopoverPlacementOptions = {},
+): void {
+    const rect = anchor.getBoundingClientRect();
+    const bounds = popoverBoundaryBand(anchor);
+
+    const ceiling = Math.round(window.innerHeight * MAX_POPOVER_VIEWPORT_RATIO);
+    const spaceBelow = Math.max(bounds.bottom - rect.bottom - BOUNDARY_INSET, MIN_POPOVER_HEIGHT);
+
+    popover.style.position = "fixed";
+    popover.style.left = `${Math.round(rect.left)}px`;
+    popover.style.top = `${Math.round(rect.bottom)}px`;
+    popover.style.maxHeight = `${Math.round(Math.min(ceiling, spaceBelow))}px`;
+
+    if (matchAnchorWidth) {
+        popover.style.width = `${Math.round(rect.width)}px`;
+    }
+}
diff --git a/web/src/elements/forms/SearchSelect/SearchSelectMenuController.ts b/web/src/elements/forms/SearchSelect/SearchSelectMenuController.ts
@@ -1,16 +1,10 @@
 import type { ListSelect } from "#elements/ak-list-select/ak-list-select";
-import { AnchorPositionSupported, AnchorSizeSupported } from "#elements/dialogs/positioning";
+import { findScrollableAncestor, placeAnchoredPopover } from "#elements/dialogs/positioning";
 
 import type { ReactiveController, ReactiveControllerHost } from "lit";
 
 const DEFAULT_REFOCUS_DELAY = 250;
 
-/**
- * Firefox reports support for anchor positioning but mis-renders anchored elements inside
- * dialogs, so use the shared capability checks rather than CSS.supports directly.
- */
-const CSSAnchorPositioningSupported = AnchorPositionSupported && AnchorSizeSupported;
-
 interface SearchSelectMenuHost extends ReactiveControllerHost, HTMLElement {
     open: boolean;
     readOnly: boolean;
@@ -33,11 +27,6 @@ export class SearchSelectMenuController implements ReactiveController {
         host.addController(this);
     }
 
-    public hostConnected() {
-        // Styling hook: opt this instance into the CSS anchor-positioning block.
-        this.host.toggleAttribute("data-anchor-css", CSSAnchorPositioningSupported);
-    }
-
     /**
      * Reconcile the popover's actual open state with the host's `open` state.
      * Called after the host updates so the menu has rendered.
@@ -54,9 +43,9 @@ export class SearchSelectMenuController implements ReactiveController {
 
         if (this.host.open && !this.host.readOnly && !popoverOpen) {
             menu.showPopover();
-            // Start tracking synchronously (not via the async `toggle` event) so the
-            // fallback places the menu in the same frame it becomes visible — no flash
-            // at the UA default position.
+            // Start tracking synchronously (not via the async `toggle` event) so the menu
+            // is placed in the same frame it becomes visible — no flash at the UA default
+            // position.
             this.#startTracking();
         } else if ((!this.host.open || this.host.readOnly) && popoverOpen) {
             menu.hidePopover();
@@ -77,7 +66,9 @@ export class SearchSelectMenuController implements ReactiveController {
         const dismissedByThisClick = event.timeStamp - this.#lastLightDismiss < refocusDelay;
 
         this.host.open = dismissedByThisClick ? false : !this.host.open;
-        this.getInput()?.focus();
+        // preventScroll: an auto-scroll here would shift the anchor in the same beat the
+        // menu is being placed against it.
+        this.getInput()?.focus({ preventScroll: true });
     };
 
     public readonly handleMenuToggle = (event: ToggleEvent) => {
@@ -114,7 +105,7 @@ export class SearchSelectMenuController implements ReactiveController {
 
         if (menuCanScroll) return;
 
-        const scroller = this.#findScrollableAncestor();
+        const scroller = findScrollableAncestor(this.host);
         if (!scroller) return;
 
         const deltaY = (() => {
@@ -134,42 +125,13 @@ export class SearchSelectMenuController implements ReactiveController {
         event.preventDefault();
     };
 
-    /**
-     * Walk the flattened (composed) tree upward from the host — crossing shadow
-     * boundaries and slots — to the nearest vertically scrollable ancestor.
-     */
-    #findScrollableAncestor(): HTMLElement | null {
-        const composedParent = (node: Node): Node | null => {
-            const slot = (node as Element).assignedSlot;
-            if (slot) return slot;
-
-            const parent = node.parentNode;
-            return parent instanceof ShadowRoot ? parent.host : parent;
-        };
-
-        for (let node = composedParent(this.host); node; node = composedParent(node)) {
-            if (!(node instanceof HTMLElement)) continue;
-
-            const { overflowY } = getComputedStyle(node);
-            const scrollable =
-                overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
-
-            if (scrollable && node.scrollHeight > node.clientHeight) {
-                return node;
-            }
-        }
-
-        return null;
-    }
-
     #startTracking() {
         const input = this.getInput();
         const menu = this.getMenu();
         if (!input || !menu) return;
 
         // Close the menu when its anchor input is no longer visible — scrolled out
-        // of the viewport, clipped away by a scroll container, or hidden. This works
-        // in every browser regardless of anchor-positioning support.
+        // of the viewport, clipped away by a scroll container, or hidden.
         this.#anchorObserver?.disconnect();
         this.#anchorObserver = new IntersectionObserver(
             (entries) => {
@@ -181,21 +143,17 @@ export class SearchSelectMenuController implements ReactiveController {
         );
         this.#anchorObserver.observe(input);
 
-        // Native CSS anchor positioning handles placement and tracks scrolling on its
-        // own — nothing else to do.
-        if (CSSAnchorPositioningSupported) return;
-
-        // Otherwise position the menu imperatively and keep it in sync. We can't rely
-        // on a global scroll listener: `scroll` events are `composed: false`, so
-        // scrolling inside a shadow-rendered container (e.g. a modal dialog body)
-        // never reaches `window`. Instead we re-place the menu each animation frame
-        // while open, which also covers nested scrollers, layout shifts, and resizes.
+        // Position the menu imperatively and keep it in sync. We can't rely on a global
+        // scroll listener: `scroll` events are `composed: false`, so scrolling inside a
+        // shadow-rendered container (e.g. a modal dialog body) never reaches `window`.
+        // Instead we re-place the menu each animation frame while open, which also covers
+        // nested scrollers, layout shifts, resizes, and options arriving late.
         let lastGeometry = "";
         const reflow = () => {
             const rect = this.getInput()?.getBoundingClientRect();
 
             if (rect) {
-                const geometry = `${rect.left},${rect.top},${rect.bottom},${rect.width},${window.innerHeight}`;
+                const geometry = `${rect.left},${rect.top},${rect.bottom},${rect.width},${window.innerHeight},${menu.scrollHeight}`;
 
                 if (geometry !== lastGeometry) {
                     lastGeometry = geometry;
@@ -220,35 +178,11 @@ export class SearchSelectMenuController implements ReactiveController {
         }
     }
 
-    /**
-     * Position the menu against the input imperatively, matching the CSS
-     * anchor-positioning behavior (below by default, flip above when there's no
-     * room, width matched to the input, capped height). Only used where CSS anchor
-     * positioning is unavailable.
-     */
     #positionMenu() {
         const input = this.getInput();
         const menu = this.getMenu();
         if (!input || !menu) return;
 
-        const rect = input.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const maxHeight = Math.round(viewportHeight * 0.4);
-        const menuHeight = Math.min(menu.offsetHeight || maxHeight, maxHeight);
-        const spaceBelow = viewportHeight - rect.bottom;
-        const flipUp = spaceBelow < menuHeight && rect.top > spaceBelow;
-
-        menu.style.position = "fixed";
-        menu.style.left = `${Math.round(rect.left)}px`;
-        menu.style.width = `${Math.round(rect.width)}px`;
-        menu.style.maxHeight = `${maxHeight}px`;
-
-        if (flipUp) {
-            menu.style.top = "auto";
-            menu.style.bottom = `${Math.round(viewportHeight - rect.top)}px`;
-        } else {
-            menu.style.bottom = "auto";
-            menu.style.top = `${Math.round(rect.bottom)}px`;
-        }
+        placeAnchoredPopover(input, menu, { matchAnchorWidth: true });
     }
 }
diff --git a/web/src/elements/forms/SearchSelect/ak-search-select-view.css b/web/src/elements/forms/SearchSelect/ak-search-select-view.css
@@ -2,15 +2,11 @@
     --pf-c-select__toggle-wrapper--MaxWidth: initial;
 }
 
-input.pf-c-select__toggle-typeahead {
-    anchor-name: --ak-search-select-anchor;
-}
-
 ak-list-select[popover] {
     /**
      *  Strip the UA popover default (centered, bordered) so the menu is a bare box.
-     *  Placement is done either with CSS anchor positioning
-     *  (see the [data-anchor-css] rule) or imperatively in #positionMenu.
+     *  Placement and height come from placeAnchoredPopover, which — unlike CSS anchor
+     *  positioning — can hold the menu inside the dialog it was opened from.
      */
     position: fixed;
     margin: 0;
@@ -26,23 +22,6 @@ ak-list-select[popover] {
     overflow-y: auto;
 }
 
-/**
- * Native CSS anchor positioning — used only where it is both supported and reliable
- * (not Firefox; see #elements/dialogs/positioning).
- *
- * Tracks scrolling for free, so no per-frame JS placement is needed.
- */
-:host([data-anchor-css]) ak-list-select[popover] {
-    position: absolute;
-    position-anchor: --ak-search-select-anchor;
-    top: anchor(bottom);
-    left: anchor(left);
-    width: anchor-size(width);
-
-    /* Flip above the input when there is no room below. */
-    position-try-fallbacks: flip-block;
-}
-
 /**
  * The inner PatternFly dropdown is inline-block (content width);
  * stretch it to fill the (input-width) host so the menu matches the input.
