fix(AutoComplete): fix UX to open menu after autocomplete focus

src/components/forms/auto-complete/RuiAutoComplete.spec.ts

@@ -80,7 +80,12 @@ describe('autocomplete', () => {
       },
     });
 
+    await wrapper.find('input').trigger('focus');
+    await nextTick();
+    expect(document.body.querySelector('div[role=menu]')).toBeFalsy();
+
     // Open Menu Select
+    await wrapper.find('[data-id=activator]').trigger('focus');
     await wrapper.find('[data-id=activator]').trigger('click');
     await vi.delay();
     await nextTick();

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

@@ -417,7 +417,6 @@ watch(anyFocused, (focused) => {
 });
 
 function onInputFocused() {
-  set(isOpen, true);
   set(focusedValueIndex, -1);
   if (get(shouldApplyValueAsSearch))
     get(textInput)?.select();
@@ -470,6 +469,10 @@ function onEnter(event: KeyboardEvent) {
       set(isOpen, false);
     event.preventDefault();
   }
+  else if (!get(isOpen)) {
+    set(isOpen, true);
+    event.preventDefault();
+  }
 }
 
 function onTab(event: KeyboardEvent) {
@@ -503,6 +506,13 @@ const inputClass: ComputedRef<string> = computed(() => {
   return 'flex-1 min-w-0';
 });
 
+function arrowClicked(event: any) {
+  if (get(isOpen)) {
+    set(isOpen, false);
+    event.stopPropagation();
+  }
+}
+
 defineExpose({
   focus: setInputFocus,
   setSelectionRange,
@@ -662,7 +672,10 @@ defineExpose({
             />
           </span>
 
-          <span :class="css.icon__wrapper">
+          <span
+            :class="css.icon__wrapper"
+            @click="arrowClicked($event)"
+          >
             <RuiIcon
               :class="[css.icon, { 'rotate-180': open }]"
               :size="dense ? 24 : 32"

src/composables/dropdown-menu.ts

@@ -95,10 +95,6 @@ export function useDropdownMenu<T, K extends keyof T>({
     return computeValue(widths.min + difference / 2);
   });
 
-  function toggle(state: boolean = false) {
-    set(isOpen, state);
-  }
-
   function getText(item: T): T[K] | T | string {
     if (textAttr) {
       if (typeof textAttr === 'function')
@@ -208,8 +204,10 @@ export function useDropdownMenu<T, K extends keyof T>({
   });
 
   const moveHighlight = (up: boolean) => {
-    if (get(!isOpen))
+    if (!get(isOpen)) {
+      set(isOpen, true);
       return;
+    }
 
     let position = get(highlightedIndex);
     const move = up ? -1 : 1;
@@ -252,7 +250,6 @@ export function useDropdownMenu<T, K extends keyof T>({
     moveHighlight,
     optionsWithSelectedHidden: options,
     renderedData,
-    toggle,
     valueKey,
     wrapperProps,
   };