fix(AutoComplete): expose focus, selection, fix scrolling and hide em…

…pty menu (#202)

src/components/forms/auto-complete/RuiAutoComplete.vue

@@ -447,6 +447,16 @@ function getListeners(on: Record<string, Function | undefined>, $listeners: Reco
     ...listenersFiltered,
   };
 }
+
+function setSelectionRange(start: number, end: number) {
+  set(searchInputFocused, true);
+  get(textInput)?.setSelectionRange?.(start, end);
+}
+
+defineExpose({
+  focus: setInputFocus,
+  setSelectionRange,
+});
 </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,

src/components/overlays/menu/Menu.vue

@@ -11,8 +11,8 @@ export interface MenuProps {
   openDelay?: number;
   closeDelay?: number;
   popper?: PopperOptions;
-  wrapperClass?: string;
-  menuClass?: string;
+  wrapperClass?: string | object | string[];
+  menuClass?: string | object | string[];
   closeOnContentClick?: boolean;
   persistOnActivatorClick?: boolean;
   hint?: string;

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) => {

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,
   };