From f54e82781a99ce4c3e12f1648d676e523d39a2f8 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 3 Jan 2023 10:11:23 +0100
Subject: [PATCH] web/elements: fix dropdown menu closing before selecting item
 sometimes

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/forms/SearchSelect.ts | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/web/src/elements/forms/SearchSelect.ts b/web/src/elements/forms/SearchSelect.ts
index f8518783f2..547484a39e 100644
--- a/web/src/elements/forms/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect.ts
@@ -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)