Remove focus when an external field is focused programmatically

MattPurland · Jul 4, 2021 · 508582d · 508582d
1 parent 5e29a81
commit 508582d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/Select.svelte b/src/Select.svelte
@@ -559,7 +559,7 @@
         if (input) input.focus();
     }
 
-    function handleWindowClick(event) {
+    function handleWindowEvent(event) {
         if (!container) return;
         const eventTarget =
             event.path && event.path.length > 0 ? event.path[0] : event.target;
@@ -819,7 +819,7 @@
     }
 </style>
 
-<svelte:window on:click={handleWindowClick} on:keydown={handleKeyDown} />
+<svelte:window on:click={handleWindowEvent} on:focusin={handleWindowEvent} on:keydown={handleKeyDown} />
 
 <div
     class="selectContainer {containerClasses}"

diff --git a/test/src/index.js b/test/src/index.js
@@ -1004,6 +1004,25 @@ test(`show ellipsis for overflowing text in a List item`, async (t) => {
   target.style.width = '';
 });
 
+test('focusing in an external textarea should close and blur it', async (t) => {
+  const textarea = document.createElement('textarea');
+  document.body.appendChild(textarea);
+  const select = new Select({
+    target,
+    props: {
+      items,
+    }
+  });
+
+  await querySelectorClick('.selectContainer');
+  t.ok(select.listOpen);
+  textarea.focus();
+  await wait(0);
+  t.ok(!select.listOpen);
+
+  textarea.remove();
+  select.$destroy();
+});
 
 test('clicking between Selects should close and blur other Select', async (t) => {
   const select = new Select({