From 87fa50c49221f9f40527ac45dc0ff406118b54ed Mon Sep 17 00:00:00 2001
From: Jens L <jens.langhammer@beryju.org>
Date: Wed, 1 Mar 2023 15:41:28 +0100
Subject: [PATCH] web/admin: workaround for tenant certificate selection being
 cut off (#4820)

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

#4814
---
 web/src/admin/tenants/TenantForm.ts    | 62 +++++++++++++-------------
 web/src/elements/forms/SearchSelect.ts |  5 ++-
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/web/src/admin/tenants/TenantForm.ts b/web/src/admin/tenants/TenantForm.ts
index 0b501927c..1c1037f82 100644
--- a/web/src/admin/tenants/TenantForm.ts
+++ b/web/src/admin/tenants/TenantForm.ts
@@ -370,6 +370,37 @@ export class TenantForm extends ModelForm<Tenant, string> {
             <ak-form-group>
                 <span slot="header"> ${t`Other global settings`} </span>
                 <div slot="body" class="pf-c-form">
+                    <ak-form-element-horizontal label=${t`Web Certificate`} name="webCertificate">
+                        <ak-search-select
+                            .fetchObjects=${async (
+                                query?: string,
+                            ): Promise<CertificateKeyPair[]> => {
+                                const args: CryptoCertificatekeypairsListRequest = {
+                                    ordering: "name",
+                                    hasKey: true,
+                                    includeDetails: false,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const certificates = await new CryptoApi(
+                                    DEFAULT_CONFIG,
+                                ).cryptoCertificatekeypairsList(args);
+                                return certificates.results;
+                            }}
+                            .renderElement=${(item: CertificateKeyPair): string => {
+                                return item.name;
+                            }}
+                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
+                                return item?.pk;
+                            }}
+                            .selected=${(item: CertificateKeyPair): boolean => {
+                                return item.pk === this.instance?.webCertificate;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
+                    </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Event retention`}
                         ?required=${true}
@@ -404,37 +435,6 @@ export class TenantForm extends ModelForm<Tenant, string> {
                             ${t`Set custom attributes using YAML or JSON. Any attributes set here will be inherited by users, if the request is handled by this tenant.`}
                         </p>
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal label=${t`Web Certificate`} name="webCertificate">
-                        <ak-search-select
-                            .fetchObjects=${async (
-                                query?: string,
-                            ): Promise<CertificateKeyPair[]> => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    hasKey: true,
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.webCertificate;
-                            }}
-                            ?blankable=${true}
-                        >
-                        </ak-search-select>
-                    </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
         </form>`;
diff --git a/web/src/elements/forms/SearchSelect.ts b/web/src/elements/forms/SearchSelect.ts
index d376e6e9f..bd5f8d136 100644
--- a/web/src/elements/forms/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect.ts
@@ -268,7 +268,10 @@ export class SearchSelect<T> extends AKElement {
                         @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) {
+                            if (
+                                ev.relatedTarget &&
+                                (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