web/elements: fix dropdown menu closing before selecting item sometimes

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2023-01-03 10:11:23 +01:00
parent e334d8ab00
commit f54e82781a
No known key found for this signature in database
1 changed files with 16 additions and 7 deletions

View File

@ -1,5 +1,5 @@
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { groupBy } from "@goauthentik/common/utils";
import { groupBy, randomString } from "@goauthentik/common/utils";
import { AKElement } from "@goauthentik/elements/Base";
import { PreventFormSubmit } from "@goauthentik/elements/forms/Form";
@ -68,7 +68,7 @@ export class SearchSelect<T> extends AKElement {
scrollHandler?: () => void;
observer: IntersectionObserver;
dropdownUID: string;
dropdownContainer: HTMLDivElement;
constructor() {
@ -85,6 +85,7 @@ export class SearchSelect<T> extends AKElement {
});
});
this.observer.observe(this);
this.dropdownUID = `dropdown-${randomString(10)}`;
}
toForm(): unknown {
@ -203,6 +204,7 @@ export class SearchSelect<T> extends AKElement {
class="pf-c-dropdown__menu pf-m-static"
role="listbox"
style="max-height:50vh;overflow-y:auto;"
id=${this.dropdownUID}
>
${this.blankable
? html`
@ -256,11 +258,18 @@ export class SearchSelect<T> extends AKElement {
this.open = true;
this.renderMenu();
}}
@blur=${() => {
setTimeout(() => {
this.open = false;
this.renderMenu();
}, 100);
@blur=${(ev: FocusEvent) => {
// Check if we're loosing focus to one of our dropdown items, and if such don't blur
if (ev.relatedTarget instanceof HTMLButtonElement) {
const parentMenu = ev.relatedTarget.closest(
"ul.pf-c-dropdown__menu.pf-m-static",
);
if (parentMenu && parentMenu.id === this.dropdownUID) {
return;
}
}
this.open = false;
this.renderMenu();
}}
.value=${this.selectedObject
? this.renderElement(this.selectedObject)