Add tabbable option to DropdownItem

This commit is contained in:
Henrik Giesel 2021-06-25 17:34:04 +02:00
parent a5af3a9280
commit 8d95503189
2 changed files with 9 additions and 3 deletions

View file

@ -11,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { className as class };
export let tooltip: string | undefined = undefined;
export let tabbable: boolean = true;
let buttonRef: HTMLButtonElement;
@ -22,6 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<button
{id}
tabindex={tabbable ? 0 : -1}
bind:this={buttonRef}
class={`btn dropdown-item ${className}`}
class:btn-day={!nightMode}

View file

@ -30,7 +30,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
}
function updateActiveItem(even: FocusEvent): void {}
function updateActiveItem(event: FocusEvent): void {
event.preventDefault();
}
</script>
<ButtonToolbar class={`dropup ${className}`} {size}>
@ -38,8 +40,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<DropdownMenu class="d-flex flex-column-reverse">
{#each suggestions as tag}
<DropdownItem on:focus={updateActiveItem} on:keydown={switchUpDown}
>{tag}</DropdownItem
<DropdownItem
tabbable={false}
on:focus={updateActiveItem}
on:keydown={switchUpDown}>{tag}</DropdownItem
>
{/each}
</DropdownMenu>