diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index c6ab6d32..03d5f933 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -82,7 +82,7 @@ */ export let listRef = null; - import { createEventDispatcher, afterUpdate } from "svelte"; + import { createEventDispatcher, afterUpdate, tick } from "svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import { ListBox, @@ -173,9 +173,11 @@ { if (disabled) return; open = true; + await tick(); + ref.focus(); }}" id="{id}" name="{name}" @@ -220,7 +222,8 @@ on:focus on:blur on:blur="{({ relatedTarget }) => { - if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { + if (!open || !relatedTarget) return; + if (relatedTarget.getAttribute('role') !== 'button' && relatedTarget.getAttribute('role') !== 'searchbox') { ref.focus(); } }}" diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index d0c93750..5032f582 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -189,11 +189,6 @@ change(-1); } }}" - on:blur="{({ relatedTarget }) => { - if (relatedTarget) { - ref.focus(); - } - }}" disabled="{disabled}" translateWithId="{translateWithId}" id="{id}" @@ -213,6 +208,7 @@ on:click="{() => { selectedId = item.id; selectedIndex = i; + ref.focus(); }}" on:mouseenter="{() => { highlightedIndex = i;