From 76b99e453b128c82d448fbab8e680cee4c7f0c55 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Tue, 25 Jun 2024 19:41:03 +0700
Subject: [PATCH] fix(AutoComplete): fix UX to open menu after autocomplete
 focus

---
 .../forms/auto-complete/RuiAutoComplete.spec.ts |  5 +++++
 .../forms/auto-complete/RuiAutoComplete.vue     | 17 +++++++++++++++--
 src/composables/dropdown-menu.ts                |  9 +++------
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
index 26a37a0..86f9f5f 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
+++ b/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();
diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
index ce49c5c..75931a8 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.vue
+++ b/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"
diff --git a/src/composables/dropdown-menu.ts b/src/composables/dropdown-menu.ts
index adfd69c..977b75b 100644
--- a/src/composables/dropdown-menu.ts
+++ b/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,
   };