fix(AutoComplete): change style of input when not focused

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

@@ -180,6 +180,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('update:modelValue')?.[0]).toEqual([newValue]);
 

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

@@ -337,7 +337,7 @@ watch(focusedValueIndex, async (index) => {
 });
 
 function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {
-  if (!get(multiple))
+  if (!get(multiple) || get(internalSearch).length > 0)
     return;
 
   event.preventDefault();
@@ -367,6 +367,14 @@ const { focused: noDataContainerFocusedWithin } = useFocusWithin(noDataContainer
 const { focused: menuFocusedWithin } = useFocusWithin(containerProps.ref);
 const anyFocused = logicOr(activatorFocusedWithin, noDataContainerFocusedWithin, menuFocusedWithin);
 
+const inputClass = computed<string>(() => {
+  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';
+});
+
 function textValueToProperValue(val: any): T {
   const keyAttr = props.keyAttr;
   const textAttr = props.textAttr;
@@ -618,7 +626,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()"