diff --git a/packages/radix-vue/src/Combobox/Combobox.test.ts b/packages/radix-vue/src/Combobox/Combobox.test.ts index f807dfdcb..bf3f9645e 100644 --- a/packages/radix-vue/src/Combobox/Combobox.test.ts +++ b/packages/radix-vue/src/Combobox/Combobox.test.ts @@ -103,6 +103,38 @@ describe('given default Combobox', () => { }) }) }) + + describe('after keypress input', () => { + beforeEach(async () => { + await valueBox.setValue('B') + }) + + describe('if filter-function provided', () => { + beforeEach(async () => { + await wrapper.setProps({ + filterFunction: (list: any[], term: string) => { + return list.filter(i => i.toLowerCase().includes(term.toLowerCase())) + }, + }) + }) + it('should filter with the searchTerm (Bl', async () => { + await valueBox.setValue('Bl') + + const selection = wrapper.findAll('[data-highlighted]').filter(i => i.attributes('style') !== 'display: none;') + expect(selection.length).toBe(1) + expect(selection[0].element.innerHTML).contains('Blueberry') + }) + + it('should filter with the searchTerm (B', async () => { + await valueBox.setValue('Bl') + await valueBox.setValue('B') + + const selection = wrapper.findAll('[data-highlighted]').filter(i => i.attributes('style') !== 'display: none;') + expect(selection.length).toBe(1) + expect(selection[0].element.innerHTML).contains('Banana') + }) + }) + }) }) }) diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue index fd69df998..f7e96e1dc 100644 --- a/packages/radix-vue/src/Combobox/ComboboxRoot.vue +++ b/packages/radix-vue/src/Combobox/ComboboxRoot.vue @@ -211,10 +211,10 @@ watch(stringifiedModelValue, async () => { immediate: !props.searchTerm, }) -watch(() => filteredOptions.value.length, async (length) => { +watch(() => [filteredOptions.value.length, searchTerm.value.length], async ([length, searchTermLength], [oldLength, oldSearchTermLength]) => { await nextTick() await nextTick() - if (length && activeIndex.value === -1) + if (length && (oldSearchTermLength > searchTermLength || activeIndex.value === -1)) selectedValue.value = filteredOptions.value[0] })