From faf8950ba5f9fb10df1c3fe644d948952925848d 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                |  4 +++-
 3 files changed, 23 insertions(+), 3 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..f668011 100644
--- a/src/composables/dropdown-menu.ts
+++ b/src/composables/dropdown-menu.ts
@@ -208,8 +208,10 @@ export function useDropdownMenu<T, K extends keyof T>({
   });
 
   const moveHighlight = (up: boolean) => {
-    if (get(!isOpen))
+    if (!get(isOpen)) {
+      toggle(true);
       return;
+    }
 
     let position = get(highlightedIndex);
     const move = up ? -1 : 1;