From 83dd2be562d2f06dcded9f0b9fcab186521f6964 Mon Sep 17 00:00:00 2001
From: Enrico Sacchetti <enrico@theetrain.ca>
Date: Tue, 29 Nov 2022 15:49:00 -0500
Subject: [PATCH] fix(Dropdown): adjust select event

- Dispatch select event only upon user interaction
- Allow arrow keys to open menu and highlight items
---
 src/Dropdown/Dropdown.svelte | 37 +++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 79a67406..567c0760 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -112,6 +112,12 @@
 
   let highlightedIndex = -1;
 
+  $: inline = type === "inline";
+  $: selectedItem = items.find((item) => item.id === selectedId);
+  $: if (!open) {
+    highlightedIndex = -1;
+  }
+
   function change(dir) {
     let index = highlightedIndex + dir;
 
@@ -138,14 +144,9 @@
     highlightedIndex = index;
   }
 
-  $: if (selectedId !== undefined) {
+  const dispatchSelect = () => {
     dispatch("select", { selectedId, selectedItem });
-  }
-  $: inline = type === "inline";
-  $: selectedItem = items.find((item) => item.id === selectedId);
-  $: if (!open) {
-    highlightedIndex = -1;
-  }
+  };
 </script>
 
 <svelte:window
@@ -227,19 +228,40 @@
             items[highlightedIndex].id !== selectedId
           ) {
             selectedId = items[highlightedIndex].id;
+            dispatchSelect();
             open = false;
           }
         } else if (key === 'Tab') {
           open = false;
           ref.blur();
         } else if (key === 'ArrowDown') {
+          if (!open) open = true;
           change(1);
         } else if (key === 'ArrowUp') {
+          if (!open) open = true;
           change(-1);
         } else if (key === 'Escape') {
           open = false;
         }
       }}"
+      on:keyup="{(e) => {
+        const { key } = e;
+        if ([' '].includes(key)) {
+          e.preventDefault();
+        } else {
+          return;
+        }
+        open = !open;
+
+        if (
+          highlightedIndex > -1 &&
+          items[highlightedIndex].id !== selectedId
+        ) {
+          selectedId = items[highlightedIndex].id;
+          dispatchSelect();
+          open = false;
+        }
+      }}"
       disabled="{disabled}"
       translateWithId="{translateWithId}"
       id="{id}"
@@ -271,6 +293,7 @@
                 return;
               }
               selectedId = item.id;
+              dispatchSelect();
               ref.focus();
             }}"
             on:mouseenter="{() => {