From f6877f38091007e775c54eac60360e3ad85274da Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 5 Dec 2020 11:36:41 -0800
Subject: [PATCH] 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 | 9 ++++++---
 src/Dropdown/Dropdown.svelte | 6 +-----
 2 files changed, 7 insertions(+), 8 deletions(-)

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 @@
     <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();
           }
         }}"
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;