web/elements: fix SearchSelect not working on safari

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/elements/forms/SearchSelect.ts

@@ -160,8 +160,8 @@ export class SearchSelect<T> extends AKElement {
             shouldRenderGroups = false;
             groupedItems = [["", []]];
         }
-        const renderGroup = (items: T[]): TemplateResult => {
-            return html`${items.map((obj) => {
+        const renderGroup = (items: T[], tabIndexStart: number): TemplateResult => {
+            return html`${items.map((obj, index) => {
                 let desc = undefined;
                 if (this.renderDescription) {
                     desc = this.renderDescription(obj);
@@ -177,6 +177,7 @@ export class SearchSelect<T> extends AKElement {
                                 this.selectedObject = obj;
                                 this.open = false;
                             }}
+                            tabindex=${index + tabIndexStart}
                         >
                             ${desc === undefined
                                 ? this.renderElement(obj)
@@ -205,6 +206,7 @@ export class SearchSelect<T> extends AKElement {
                     role="listbox"
                     style="max-height:50vh;overflow-y:auto;"
                     id=${this.dropdownUID}
+                    tabindex="0"
                 >
                     ${this.blankable
                         ? html`
@@ -216,6 +218,7 @@ export class SearchSelect<T> extends AKElement {
                                           this.selectedObject = undefined;
                                           this.open = false;
                                       }}
+                                      tabindex="0"
                                   >
                                       ${this.emptyOption}
                                   </button>
@@ -223,17 +226,17 @@ export class SearchSelect<T> extends AKElement {
                           `
                         : html``}
                     ${shouldRenderGroups
-                        ? html`${groupedItems.map(([group, items]) => {
+                        ? html`${groupedItems.map(([group, items], idx) => {
                               return html`
                                   <section class="pf-c-dropdown__group">
                                       <h1 class="pf-c-dropdown__group-title">${group}</h1>
                                       <ul>
-                                          ${renderGroup(items)}
+                                          ${renderGroup(items, idx)}
                                       </ul>
                                   </section>
                               `;
                           })}`
-                        : html`${renderGroup(groupedItems[0][1])}`}
+                        : html`${renderGroup(groupedItems[0][1], 0)}`}
                 </ul>
             </div>`,
             this.dropdownContainer,
@@ -259,6 +262,11 @@ export class SearchSelect<T> extends AKElement {
                             this.renderMenu();
                         }}
                         @blur=${(ev: FocusEvent) => {
+                            // For Safari, we get the <ul> element itself here when clicking on one of
+                            // it's buttons, as the container has tabindex set
+                            if ((ev.relatedTarget as HTMLElement).id === this.dropdownUID) {
+                                return;
+                            }
                             // Check if we're losing focus to one of our dropdown items, and if such don't blur
                             if (ev.relatedTarget instanceof HTMLButtonElement) {
                                 const parentMenu = ev.relatedTarget.closest(