web/admin: workaround for tenant certificate selection being cut off (#4820)

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

#4814
This commit is contained in:
Jens L 2023-03-01 15:41:28 +01:00 committed by GitHub
parent 9042664fcf
commit 87fa50c492
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 32 deletions

View file

@ -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>`;

View file

@ -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