From 325a9c84dcb0909acf37761e874f6497a2b1a515 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Thu, 20 Jun 2024 19:03:42 +0700
Subject: [PATCH] fix(AutoComplete): weird style when it's not focused anymore

---
 .../forms/auto-complete/RuiAutoComplete.spec.ts    |  5 +++++
 .../forms/auto-complete/RuiAutoComplete.vue        | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
index 3f62d74..26a37a0 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
+++ b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
@@ -178,6 +178,11 @@ describe('autocomplete', () => {
     expect(itemButton.innerHTML).toContain('India');
     itemButton.click();
 
+    await nextTick();
+    const input = wrapper.find('div[data-id=activator] input').element as HTMLInputElement;
+    expect(input.value).toMatch('');
+    expect(input.classList).toContain('h-0');
+
     let newValue = ['7', '8', '6'];
     expect(wrapper.emitted().input!.at(-1)![0]).toEqual(newValue);
 
diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
index 79a2236..ce49c5c 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.vue
+++ b/src/components/forms/auto-complete/RuiAutoComplete.vue
@@ -348,7 +348,7 @@ watch(focusedValueIndex, (index) => {
 });
 
 function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean) {
-  if (!get(multiple))
+  if (!get(multiple) || get(internalSearch).length > 0)
     return;
 
   event.preventDefault();
@@ -493,6 +493,16 @@ function setSelectionRange(start: number, end: number) {
   get(textInput)?.setSelectionRange?.(start, end);
 }
 
+const inputClass: ComputedRef<string> = computed(() => {
+  if ((!get(anyFocused) || get(disabled)) && !get(shouldApplyValueAsSearch))
+    return 'w-0 h-0';
+
+  if (get(internalSearch))
+    return 'flex-1 min-w-[4rem]';
+
+  return 'flex-1 min-w-0';
+});
+
 defineExpose({
   focus: setInputFocus,
   setSelectionRange,
@@ -632,7 +642,7 @@ defineExpose({
               class="bg-transparent outline-none"
               type="text"
               :placeholder="placeholder"
-              :class="(!anyFocused || disabled) && multiple ? 'w-0 h-0' : 'flex-1 min-w-[4rem]'"
+              :class="inputClass"
               @keydown.delete="onInputDeletePressed()"
               @input="updateSearchInput($event)"
               @focus="onInputFocused()"