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:
parent
82184b2882
commit
b9bb27008e
|
@ -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 },
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue