From 9c7456e82039cd5b46eb75a17e85539fc7e7ce09 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Wed, 5 Jun 2024 17:48:50 +0700
Subject: [PATCH 1/2] fix(AutoComplete): some issues

---
 .../forms/auto-complete/RuiAutoComplete.vue   | 14 +++++++
 src/components/overlays/menu/Menu.vue         |  4 +-
 src/composables/dropdown-menu.ts              | 42 +++++++++++--------
 tests/setup-files/setup.ts                    |  3 +-
 4 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
index c0ebe95..9cbfe2d 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.vue
+++ b/src/components/forms/auto-complete/RuiAutoComplete.vue
@@ -447,6 +447,16 @@ function getListeners(on: Record<string, Function | undefined>, $listeners: Reco
     ...listenersFiltered,
   };
 }
+
+function setInputSelectionRange(start: number, end: number) {
+  set(searchInputFocused, true);
+  get(textInput)?.setSelectionRange?.(start, end);
+}
+
+defineExpose({
+  setInputFocus,
+  setInputSelectionRange,
+});
 </script>
 
 <template>
@@ -459,6 +469,10 @@ function getListeners(on: Record<string, Function | undefined>, $listeners: Reco
       fullWidth: true,
       persistOnActivatorClick: true,
       ...menuOptions,
+      menuClass: [
+        { hidden: (optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data']) },
+        menuOptions?.menuClass,
+      ],
       errorMessages,
       successMessages,
       hint,
diff --git a/src/components/overlays/menu/Menu.vue b/src/components/overlays/menu/Menu.vue
index 943281d..b8e47bd 100644
--- a/src/components/overlays/menu/Menu.vue
+++ b/src/components/overlays/menu/Menu.vue
@@ -11,8 +11,8 @@ export interface MenuProps {
   openDelay?: number;
   closeDelay?: number;
   popper?: PopperOptions;
-  wrapperClass?: string;
-  menuClass?: string;
+  wrapperClass?: any;
+  menuClass?: any;
   closeOnContentClick?: boolean;
   persistOnActivatorClick?: boolean;
   hint?: string;
diff --git a/src/composables/dropdown-menu.ts b/src/composables/dropdown-menu.ts
index a1d66d5..adfd69c 100644
--- a/src/composables/dropdown-menu.ts
+++ b/src/composables/dropdown-menu.ts
@@ -138,26 +138,28 @@ export function useDropdownMenu<T, K extends keyof T>({
 
   function adjustScrollByHighlightedIndex(smooth: boolean = false) {
     const index = get(highlightedIndex);
-    nextTick(() => {
-      const container = get(menuRef)?.parentElement;
-      if (container && index > -1) {
-        const highlightedElem = get(menuRef).getElementsByClassName('highlighted')[0];
-
-        if (highlightedElem) {
-          highlightedElem.scrollIntoView?.({ behavior: smooth ? 'smooth' : 'auto', block: 'nearest' });
-          if (get(autoFocus) && 'focus' in highlightedElem && typeof highlightedElem.focus === 'function')
-            highlightedElem?.focus();
-        }
-        else {
-          scrollTo(index);
-          if (get(autoFocus)) {
-            const elem = get(menuRef).getElementsByClassName('highlighted')[0];
-            if (elem && 'focus' in elem && typeof elem.focus === 'function')
-              elem.focus();
+    if (index > -1) {
+      nextTick(() => {
+        const container = get(menuRef)?.parentElement;
+        if (container) {
+          const highlightedElem = get(menuRef).getElementsByClassName('highlighted')[0];
+
+          if (highlightedElem) {
+            highlightedElem.scrollIntoView?.({ behavior: smooth ? 'smooth' : 'auto', block: 'nearest' });
+            if (get(autoFocus) && 'focus' in highlightedElem && typeof highlightedElem.focus === 'function')
+              highlightedElem?.focus();
+          }
+          else {
+            scrollTo(index);
+            if (get(autoFocus)) {
+              const elem = get(menuRef).getElementsByClassName('highlighted')[0];
+              if (elem && 'focus' in elem && typeof elem.focus === 'function')
+                elem.focus();
+            }
           }
         }
-      }
-    });
+      });
+    }
   }
 
   function updateOpen(open: boolean) {
@@ -193,12 +195,16 @@ export function useDropdownMenu<T, K extends keyof T>({
     if (get(highlightedIndex) !== -1) {
       if (get(autoSelectFirst)) {
         set(highlightedIndex, 0);
+        adjustScrollByHighlightedIndex();
       }
       else {
         set(highlightedIndex, -1);
         scrollTo(0);
       }
     }
+    else {
+      scrollTo(0);
+    }
   });
 
   const moveHighlight = (up: boolean) => {
diff --git a/tests/setup-files/setup.ts b/tests/setup-files/setup.ts
index 088aeb5..4342732 100644
--- a/tests/setup-files/setup.ts
+++ b/tests/setup-files/setup.ts
@@ -55,10 +55,11 @@ vi.mock('@vueuse/core', async () => {
       .fn().mockImplementation((options: []) => ({
         containerProps: {
           ref: ref(),
-          onScroll: () => {},
+          onScroll: vi.fn(),
         },
         list: computed(() => get(options).map((data, index) => ({ data, index }))),
         wrapperProps: {},
+        scrollTo: vi.fn(),
       })),
     refDebounced: (ref: Ref) => ref,
   };

From 0554f9ecd8648ff579f8cb96a419a3e72be15cc4 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Wed, 5 Jun 2024 18:01:31 +0700
Subject: [PATCH 2/2] fix: based on the review

---
 src/components/forms/auto-complete/RuiAutoComplete.vue | 6 +++---
 src/components/overlays/menu/Menu.vue                  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
index 9cbfe2d..85b3e98 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.vue
+++ b/src/components/forms/auto-complete/RuiAutoComplete.vue
@@ -448,14 +448,14 @@ function getListeners(on: Record<string, Function | undefined>, $listeners: Reco
   };
 }
 
-function setInputSelectionRange(start: number, end: number) {
+function setSelectionRange(start: number, end: number) {
   set(searchInputFocused, true);
   get(textInput)?.setSelectionRange?.(start, end);
 }
 
 defineExpose({
-  setInputFocus,
-  setInputSelectionRange,
+  focus: setInputFocus,
+  setSelectionRange,
 });
 </script>
 
diff --git a/src/components/overlays/menu/Menu.vue b/src/components/overlays/menu/Menu.vue
index b8e47bd..607eafe 100644
--- a/src/components/overlays/menu/Menu.vue
+++ b/src/components/overlays/menu/Menu.vue
@@ -11,8 +11,8 @@ export interface MenuProps {
   openDelay?: number;
   closeDelay?: number;
   popper?: PopperOptions;
-  wrapperClass?: any;
-  menuClass?: any;
+  wrapperClass?: string | object | string[];
+  menuClass?: string | object | string[];
   closeOnContentClick?: boolean;
   persistOnActivatorClick?: boolean;
   hint?: string;