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