web: Disable library <datalist> on Firefox. (#18103)

web: Disable library autocomplete on Firefox.

web/src/elements/utils/isSafari.ts

@@ -1,4 +0,0 @@
-export const isSafari = () =>
-    navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome");
-
-export default isSafari;

web/src/elements/utils/useragent.ts

@@ -0,0 +1,19 @@
+/**
+ * @file User agent utilities.
+ */
+
+/**
+ * Predicate to determine if the current browser is Safari.
+ */
+export function isSafari(): boolean {
+    const ua = navigator.userAgent.toLowerCase();
+    return ua.includes("safari") && !ua.includes("chrome") && !ua.includes("chromium");
+}
+
+/**
+ * Predicate to determine if the current browser is Firefox.
+ */
+export function isFirefox(): boolean {
+    const ua = navigator.userAgent.toLowerCase();
+    return ua.includes("firefox");
+}

web/src/elements/utils/writeToClipboard.ts

@@ -1,4 +1,4 @@
-import { isSafari } from "./isSafari.js";
+import { isSafari } from "./useragent.js";
 
 export async function writeToClipboard(message: string) {
     if (!navigator.clipboard) {

web/src/user/LibraryPage/ak-library-impl.ts

@@ -17,6 +17,7 @@ import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 import { ifPresent } from "#elements/utils/attributes";
 import { FocusTarget } from "#elements/utils/focus";
 import { isInteractiveElement } from "#elements/utils/interactivity";
+import { isFirefox } from "#elements/utils/useragent";
 
 import type { Application } from "@goauthentik/api";
 
@@ -26,7 +27,6 @@ import { msg, str } from "@lit/localize";
 import { html, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef } from "lit/directives/ref.js";
-import { repeat } from "lit/directives/repeat.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -54,6 +54,18 @@ import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
  */
 @customElement("ak-library-impl")
 export class LibraryPage extends WithSession(AKElement) {
+    /**
+     * Maximum number of items to show in the datalist for search suggestions.
+     */
+    static readonly MAX_DATA_LIST_ITEMS = 5;
+    /**
+     * Whether to enable the datalist for search suggestions.
+     *
+     * @remarks
+     * Disabled on Firefox due to performance issues between renders.
+     */
+    static DataListEnabled = !isFirefox();
+
     static styles = [
         // ---
         PFBase,
@@ -311,21 +323,25 @@ export class LibraryPage extends WithSession(AKElement) {
                     autofocus
                     placeholder=${msg("Search for an application by name...")}
                     value=${ifPresent(this.query)}
-                    list="application-search-options"
+                    list=${ifPresent(LibraryPage.DataListEnabled, "application-search-options")}
                 />
-                <datalist id="application-search-options">
-                    ${repeat(
-                        this.visibleApplications,
-                        (application) => application.pk,
-                        (app) => {
-                            return html`<option value=${app.name}></option>`;
-                        },
-                    )}
-                </datalist>
+                ${this.renderDataList()}
             </form>
         </search>`;
     }
 
+    protected renderDataList() {
+        if (!LibraryPage.DataListEnabled) {
+            return nothing;
+        }
+
+        return html`<datalist id="application-search-options">
+            ${this.visibleApplications.slice(0, LibraryPage.MAX_DATA_LIST_ITEMS).map((app) => {
+                return html`<option value=${app.name}></option>`;
+            })}
+        </datalist>`;
+    }
+
     protected renderNoAppsFound() {
         return html`<div class="pf-c-empty-state pf-m-full-height" tabindex="-1">
             <div class="pf-c-empty-state__content">