fix(combo-box): selecting a different combobox should focus the input

This commit is contained in:
Eric Liu 2020-12-05 10:30:53 -08:00
commit afb88394c7

View file

@ -82,7 +82,7 @@
*/ */
export let listRef = null; export let listRef = null;
import { createEventDispatcher, afterUpdate } from "svelte"; import { createEventDispatcher, afterUpdate, tick } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import { import {
ListBox, ListBox,
@ -173,9 +173,11 @@
<ListBoxField <ListBoxField
role="button" role="button"
aria-expanded="{open}" aria-expanded="{open}"
on:click="{() => { on:click="{async () => {
if (disabled) return; if (disabled) return;
open = true; open = true;
await tick();
ref.focus();
}}" }}"
id="{id}" id="{id}"
name="{name}" name="{name}"
@ -220,6 +222,7 @@
on:focus on:focus
on:blur on:blur
on:blur="{({ relatedTarget }) => { on:blur="{({ relatedTarget }) => {
if (!open) return;
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
ref.focus(); ref.focus();
} }