diff --git a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts index ac08b903..96f15785 100644 --- a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts +++ b/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]); diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue index eafc5d88..b57bf349 100644 --- a/src/components/forms/auto-complete/RuiAutoComplete.vue +++ b/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(() => { + 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()"