web/elements: render ak-seach-select dropdown correctly in modals

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/core/templates/base/skeleton.html

@@ -13,6 +13,7 @@
         <link rel="stylesheet" type="text/css" href="{% static 'dist/page.css' %}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/empty-state.css' %}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/spinner.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'dist/dropdown.css' %}">
         {% block head_before %}
         {% endblock %}
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}">

web/rollup.config.js

@@ -24,6 +24,10 @@ export const resources = [
         src: "node_modules/@patternfly/patternfly/patternfly-base.css",
         dest: "dist/",
     },
+    {
+        src: "node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css",
+        dest: "dist/",
+    },
     {
         src: "node_modules/@patternfly/patternfly/components/Page/page.css",
         dest: "dist/",

web/src/common/styles/authentik.css

@@ -310,6 +310,18 @@ html > form > input {
     .pf-c-dropdown__toggle::before {
         border-color: transparent;
     }
+    .pf-c-dropdown__menu {
+        --pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background);
+    }
+    .pf-c-dropdown__menu-item {
+        --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background);
+        --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
+    }
+    .pf-c-dropdown__menu-item:hover,
+    .pf-c-dropdown__menu-item:focus {
+        --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish);
+        --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
+    }
     .pf-c-toggle-group__button {
         color: var(--ak-dark-foreground) !important;
     }

web/src/elements/SearchSelect.ts

@@ -2,7 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html, render } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import AKGlobal from "@goauthentik/common/styles/authentik.css";
@@ -61,7 +61,81 @@ export class SearchSelect<T> extends AKElement {
         });
     }
 
+    menuId: string;
+
+    constructor() {
+        super();
+        this.menuId = btoa(Math.random().toString()).substring(10, 15);
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        document.querySelectorAll(`#${this.menuId}`).forEach((e) => e.remove());
+    }
+
+    /*
+     * This is a little bit hacky. Because we mainly want to use this field in modal-based forms,
+     * rendering this menu inline makes the menu not overlay over top of the modal, and cause
+     * the modal to scroll.
+     * Hence, we render the menu into the document root, hide it when this menu isn't open
+     * and remove it on disconnect
+     * Also to move it to the correct position we're getting this elements's position and use that
+     * to position the menu
+     * The other downside this has is that, since we're rendering outside of a shadow root,
+     * the pf-c-dropdown CSS needs to be loaded on the body.
+     */
+    renderMenu(): void {
+        const pos = this.getBoundingClientRect();
+        render(
+            html`<div
+                class="pf-c-dropdown pf-m-expanded"
+                ?hidden=${!this.open}
+                id="${this.menuId}"
+                style="position: fixed; inset: 0px auto auto 0px; z-index: 9999; transform: translate(${pos.x}px, ${pos.y +
+                this.offsetHeight}px); width: ${pos.width}px;"
+            >
+                <ul class="pf-c-dropdown__menu pf-m-static" role="listbox">
+                    ${this.blankable
+                        ? html`
+                              <li role="presentation">
+                                  <button
+                                      class="pf-c-dropdown__menu-item"
+                                      role="option"
+                                      @click=${() => {
+                                          this.selectedObject = undefined;
+                                          this.open = false;
+                                      }}
+                                  >
+                                      ---------
+                                  </button>
+                              </li>
+                          `
+                        : html``}
+                    ${this.objects.map((obj) => {
+                        return html`
+                            <li role="presentation">
+                                <button
+                                    class="pf-c-dropdown__menu-item"
+                                    role="option"
+                                    @click=${() => {
+                                        this.selectedObject = obj;
+                                        this.open = false;
+                                    }}
+                                >
+                                    ${this.renderElement(obj)}
+                                </button>
+                            </li>
+                        `;
+                    })}
+                </ul>
+            </div>`,
+            document.body,
+            { host: this },
+        );
+    }
+
     render(): TemplateResult {
+        this.renderMenu();
         return html`<div class="pf-c-select">
             <div class="pf-c-select__toggle pf-m-typeahead">
                 <div class="pf-c-select__toggle-wrapper">
@@ -75,51 +149,18 @@ export class SearchSelect<T> extends AKElement {
                         }}
                         @focus=${() => {
                             this.open = true;
+                            this.renderMenu();
                         }}
                         @blur=${() => {
                             setTimeout(() => {
                                 this.open = false;
+                                this.renderMenu();
                             }, 200);
                         }}
                         .value=${this.selectedObject ? this.renderElement(this.selectedObject) : ""}
                     />
                 </div>
             </div>
-
-            <ul class="pf-c-select__menu" role="listbox" ?hidden="${!this.open}">
-                ${this.blankable
-                    ? html`
-                          <li role="presentation">
-                              <button
-                                  class="pf-c-select__menu-item"
-                                  role="option"
-                                  @click=${() => {
-                                      this.selectedObject = undefined;
-                                      this.open = false;
-                                  }}
-                              >
-                                  ---------
-                              </button>
-                          </li>
-                      `
-                    : html``}
-                ${this.objects.map((obj) => {
-                    return html`
-                        <li role="presentation">
-                            <button
-                                class="pf-c-select__menu-item"
-                                role="option"
-                                @click=${() => {
-                                    this.selectedObject = obj;
-                                    this.open = false;
-                                }}
-                            >
-                                ${this.renderElement(obj)}
-                            </button>
-                        </li>
-                    `;
-                })}
-            </ul>
         </div>`;
     }
 }