web/elements: fix selection of blank elements in search-select, fix issue when re-opening dropdown

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2023-01-01 20:10:16 +01:00
parent 82184b2882
commit b9bb27008e
No known key found for this signature in database
2 changed files with 12 additions and 6 deletions

View file

@ -75,16 +75,23 @@ export class SearchSelect<T> extends AKElement {
}); });
}; };
menuId: string; dropdownContainer: HTMLDivElement;
constructor() { constructor() {
super(); 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 { disconnectedCallback(): void {
super.disconnectedCallback(); super.disconnectedCallback();
document.querySelectorAll(`#${this.menuId}`).forEach((e) => e.remove()); this.dropdownContainer.remove();
} }
/* /*
@ -148,7 +155,6 @@ export class SearchSelect<T> extends AKElement {
html`<div html`<div
class="pf-c-dropdown pf-m-expanded" class="pf-c-dropdown pf-m-expanded"
?hidden=${!this.open} ?hidden=${!this.open}
id="${this.menuId}"
style="position: fixed; inset: 0px auto auto 0px; z-index: 9999; transform: translate(${pos.x}px, ${pos.y + 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;" this.offsetHeight}px); width: ${pos.width}px;"
> >
@ -187,7 +193,7 @@ export class SearchSelect<T> extends AKElement {
: html`${renderGroup(groupedItems[0][1])}`} : html`${renderGroup(groupedItems[0][1])}`}
</ul> </ul>
</div>`, </div>`,
document.body, this.dropdownContainer,
{ host: this }, { host: this },
); );
} }

View file

@ -163,7 +163,7 @@ export class Form<T> extends AKElement {
} else if (element.tagName.toLowerCase() === "ak-search-select") { } else if (element.tagName.toLowerCase() === "ak-search-select") {
const select = element as unknown as SearchSelect<unknown>; const select = element as unknown as SearchSelect<unknown>;
try { try {
json[element.name] = select.value(select.selectedObject); json[element.name] = select.value(select.selectedObject) || "";
} catch { } catch {
console.debug("authentik/form: SearchSelect.value error"); console.debug("authentik/form: SearchSelect.value error");
} }