Merge branch 'master' of github.com:IBM/carbon-components-svelte

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- ## Unreleased -->
 
+## [0.25.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.25.1) - 2020-11-28
+
+**Fixes**
+
+- set `selectedResultIndex` in HeaderSearch when clicking a result ([PR #430](https://github.com/IBM/carbon-components-svelte/pull/430), [issue #429](https://github.com/IBM/carbon-components-svelte/issues/429))
+
 ## [0.25.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.25.0) - 2020-11-27
 
 **Features**

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 155 components exported from carbon-components-svelte@0.25.0.
+> 155 components exported from carbon-components-svelte@0.25.1.
 
 ## Components
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "license": "Apache-2.0",
   "author": "IBM",
   "description": "Svelte implementation of the Carbon Design System",

src/UIShell/HeaderSearch.svelte

@@ -26,7 +26,7 @@
   /** Specify the selected result index */
   export let selectedResultIndex = 0;
 
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, tick } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
   import Search20 from "carbon-icons-svelte/lib/Search20/Search20.svelte";
 
@@ -223,12 +223,13 @@
       on:focus
       on:blur
       on:keydown
-      on:keydown="{({ key }) => {
-        switch (key) {
+      on:keydown="{(e) => {
+        switch (e.key) {
           case 'Enter':
             selectResult();
             break;
           case 'ArrowDown':
+            e.preventDefault();
             if (selectedResultIndex === results.length - 1) {
               selectedResultIndex = 0;
             } else {
@@ -236,6 +237,7 @@
             }
             break;
           case 'ArrowUp':
+            e.preventDefault();
             if (selectedResultIndex === 0) {
               selectedResultIndex = results.length - 1;
             } else {
@@ -270,7 +272,11 @@
             role="menuitem"
             href="{result.href}"
             class:selected="{selectedId === `search-menuitem-${i}`}"
-            on:click|preventDefault="{selectResult}"
+            on:click|preventDefault="{async () => {
+              selectedResultIndex = i;
+              await tick();
+              selectResult();
+            }}"
           >
             <slot result="{result}" index="{i}">
               {result.text}