Fix dropdown combobox focus (#447)

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

* fix(dropdown): selecting a different dropdown should focus the button

* fix(combo-box): focus input if related target attribute is not "searchbox"

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 @@
     <ListBoxField
       role="button"
       aria-expanded="{open}"
-      on:click="{() => {
+      on:click="{async () => {
         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();
           }
         }}"

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;