From 8900590ce2eefbd56a4b4cd71406ca77f52e42ae Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Wed, 25 Dec 2024 23:28:21 +0700
Subject: [PATCH] fix(Autocomplete): fix focus in autocomplete

---
 src/components/forms/auto-complete/RuiAutoComplete.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
index 9b104551..962bc9cb 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.vue
+++ b/src/components/forms/auto-complete/RuiAutoComplete.vue
@@ -101,6 +101,9 @@ const menuWrapperRef = ref();
 
 const { focused: activatorFocusedWithin } = useFocusWithin(activator);
 const { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);
+const { focused: activatorFocused } = useFocus(activator);
+const { focused: searchInputFocused } = useFocus(textInput);
+
 const anyFocused = logicOr(activatorFocusedWithin, menuWrapperFocusedWithin);
 const debouncedAnyFocused = refDebounced(anyFocused, 100);
 const recentlyFocused = logicOr(debouncedAnyFocused, anyFocused);
@@ -116,8 +119,6 @@ const multiple = computed(() => Array.isArray(get(modelValue)));
 
 const shouldApplyValueAsSearch = computed(() => !(slots.selection || get(multiple) || props.chips));
 
-const { focused: searchInputFocused } = useFocus(textInput);
-
 const internalSearch = ref<string>('');
 const debouncedInternalSearch = refDebounced(internalSearch, 100);
 
@@ -306,7 +307,7 @@ async function setValue(val: TItem, index?: number, skipRefocused = false): Prom
   else {
     await nextTick(() => {
       set(isOpen, false);
-      set(searchInputFocused, false);
+      set(activatorFocused, true);
     });
     if (get(shouldApplyValueAsSearch))
       updateInternalSearch(getText(val));
@@ -621,7 +622,7 @@ defineExpose({
                 </div>
               </RuiChip>
               <div
-                v-else-if="(multiple || slots['selection.prepend'] || slots.selection) && (!searchInputFocused || multiple)"
+                v-else-if="multiple || ((!searchInputFocused) && (slots['selection.prepend'] || slots.selection))"
                 class="flex"
               >
                 <slot
@@ -658,6 +659,7 @@ defineExpose({
             variant="text"
             icon
             size="sm"
+            tabindex="-1"
             color="error"
             class="group-hover:!visible"
             :class="[$style.clear, anyFocused && '!visible', {