From e421ef60817e0e3df016a23777c0d0f20392a11a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 31 Aug 2022 17:12:55 -0700
Subject: [PATCH] fix(list-box-menu-item): scroll item into view when using
 keyboard navigation

Fixes #1470
---
 src/Dropdown/Dropdown.svelte       | 2 +-
 src/ListBox/ListBoxMenuItem.svelte | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 936841f2..21fb3f1c 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -261,7 +261,7 @@
           <ListBoxMenuItem
             id="{item.id}"
             active="{selectedId === item.id}"
-            highlighted="{highlightedIndex === i || selectedId === item.id}"
+            highlighted="{highlightedIndex === i}"
             disabled="{item.disabled}"
             on:click="{(e) => {
               if (item.disabled) {
diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index ee147b13..d2318971 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@@ -12,13 +12,17 @@
 
   $: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
   $: title = isTruncated ? ref?.innerText : undefined;
+  $: if (highlighted && !ref?.matches(":hover")) {
+    // Scroll highlighted item into view if using keyboard navigation
+    ref.scrollIntoView({ block: "end" });
+  }
 </script>
 
 <div
   role="option"
   class:bx--list-box__menu-item="{true}"
   class:bx--list-box__menu-item--active="{active}"
-  class:bx--list-box__menu-item--highlighted="{highlighted}"
+  class:bx--list-box__menu-item--highlighted="{highlighted || active}"
   aria-selected="{active}"
   disabled="{disabled ? true : undefined}"
   {...$$restProps}