From 3c4950d0b6ab0ecdf1b0efc8cd9ad413e8e334af Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Thu, 21 Mar 2024 02:33:49 -0400
Subject: [PATCH] fix: nav highlight shouldn't follow mouse pos when using nav
 arrows (#257)

---
 .../multiple-select-vanilla/src/MultipleSelectInstance.ts    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts b/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts
index 8806e2a0..f932b9f8 100644
--- a/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts
+++ b/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts
@@ -40,6 +40,7 @@ export class MultipleSelectInstance {
   protected okButtonElm?: HTMLButtonElement;
   protected filterParentElm?: HTMLDivElement | null;
   protected lastFocusedItemKey = '';
+  protected lastMouseOverPosition = '';
   protected ulElm?: HTMLUListElement | null;
   protected parentElm!: HTMLDivElement;
   protected labelElm?: HTMLLabelElement | null;
@@ -1002,7 +1003,8 @@ export class MultipleSelectInstance {
         'mouseover',
         ((e: MouseEvent & { target: HTMLDivElement | HTMLLIElement }) => {
           const liElm = (e.target.closest('.ms-select-all') || e.target.closest('li')) as HTMLLIElement;
-          if (this.dropElm.contains(liElm) && this.scrolledByMouse) {
+
+          if (this.dropElm.contains(liElm) && this.lastMouseOverPosition !== `${e.clientX}:${e.clientY}`) {
             const optionElms = this.dropElm?.querySelectorAll<HTMLLIElement>(OPTIONS_LIST_SELECTOR) || [];
             const newIdx = Array.from(optionElms).findIndex(el => el.dataset.key === liElm.dataset.key);
             if (this._currentHighlightIndex !== newIdx && !liElm.classList.contains('disabled')) {
@@ -1011,6 +1013,7 @@ export class MultipleSelectInstance {
               this.changeCurrentOptionHighlight(liElm);
             }
           }
+          this.lastMouseOverPosition = `${e.clientX}:${e.clientY}`;
         }) as EventListener,
         undefined,
         'hover-highlight',