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

web/elements: fix SearchSelect not working on safari 

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2023-01-19 00:08:23 +01:00
parent 515a402db7
commit d9cc45f9ce
No known key found for this signature in database
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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