diff --git a/web/src/elements/SearchSelect.ts b/web/src/elements/SearchSelect.ts index 012edac45..728378694 100644 --- a/web/src/elements/SearchSelect.ts +++ b/web/src/elements/SearchSelect.ts @@ -75,16 +75,23 @@ export class SearchSelect extends AKElement { }); }; - menuId: string; + dropdownContainer: HTMLDivElement; constructor() { super(); - this.menuId = btoa(Math.random().toString()).substring(10, 15); + this.dropdownContainer = document.createElement("div"); + } + + connectedCallback(): void { + super.connectedCallback(); + this.dropdownContainer = document.createElement("div"); + this.dropdownContainer.dataset["managedBy"] = "ak-search-select"; + document.body.append(this.dropdownContainer); } disconnectedCallback(): void { super.disconnectedCallback(); - document.querySelectorAll(`#${this.menuId}`).forEach((e) => e.remove()); + this.dropdownContainer.remove(); } /* @@ -148,7 +155,6 @@ export class SearchSelect extends AKElement { html`
@@ -187,7 +193,7 @@ export class SearchSelect extends AKElement { : html`${renderGroup(groupedItems[0][1])}`}
`, - document.body, + this.dropdownContainer, { host: this }, ); } diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts index 486b5bc48..e078c08b4 100644 --- a/web/src/elements/forms/Form.ts +++ b/web/src/elements/forms/Form.ts @@ -163,7 +163,7 @@ export class Form extends AKElement { } else if (element.tagName.toLowerCase() === "ak-search-select") { const select = element as unknown as SearchSelect; try { - json[element.name] = select.value(select.selectedObject); + json[element.name] = select.value(select.selectedObject) || ""; } catch { console.debug("authentik/form: SearchSelect.value error"); }