trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/elements/forms/SearchSelect.ts
View File

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