diff --git a/packages/ods/src/components/combobox/src/components/ods-combobox/ods-combobox.tsx b/packages/ods/src/components/combobox/src/components/ods-combobox/ods-combobox.tsx index 5bd89f1baa..9971525244 100644 --- a/packages/ods/src/components/combobox/src/components/ods-combobox/ods-combobox.tsx +++ b/packages/ods/src/components/combobox/src/components/ods-combobox/ods-combobox.tsx @@ -156,6 +156,9 @@ export class OdsCombobox implements OdsFormElement { value: value, }]; this.value = value; + if (this.inputElement) { + this.inputElement.value = event.detail.text; + } } this.currentFocusedItemIndex = updateItemsFocus(this.resultElements, this.currentFocusedItemIndex, 'reset'); this.closeDropdown(); @@ -350,10 +353,9 @@ export class OdsCombobox implements OdsFormElement { const itemValue = (resultElement.searchLabel || resultElement.textContent || '').trim(); const doesMatchValue = filterRegex.test(itemValue); - - resultElement.isVisible = doesMatchValue; - - if (doesMatchValue && noMatch) { + const isAlreadySelected = this.allowMultiple && this.currentSelections.some((selection) => selection.value === resultElement.value); + resultElement.isVisible = doesMatchValue && !isAlreadySelected; + if (doesMatchValue && !isAlreadySelected && noMatch) { noMatch = false; } }); @@ -366,7 +368,8 @@ export class OdsCombobox implements OdsFormElement { this.hasNoResults = noMatch; } else { this.resultElements?.forEach((resultElement) => { - resultElement.isVisible = true; + const isAlreadySelected = this.allowMultiple && this.currentSelections.some((selection) => selection.value === resultElement.value); + resultElement.isVisible = !isAlreadySelected; }); this.hasNoResults = false; } @@ -559,6 +562,10 @@ export class OdsCombobox implements OdsFormElement { this.shouldUpdateSelection = false; this.value = inlineSelection(this.currentSelections); + if (this.isOpen) { + this.filterResults(this.inputElement?.value || ''); + } + if (this.currentSelections.length === 0 || this.currentTagFocusedIndex === -1 || this.currentTagFocusedIndex >= this.currentSelections.length) { diff --git a/packages/ods/src/components/combobox/tests/behaviour/ods-combobox.e2e.ts b/packages/ods/src/components/combobox/tests/behaviour/ods-combobox.e2e.ts index a28bddeba1..1dccfcee28 100644 --- a/packages/ods/src/components/combobox/tests/behaviour/ods-combobox.e2e.ts +++ b/packages/ods/src/components/combobox/tests/behaviour/ods-combobox.e2e.ts @@ -618,4 +618,38 @@ describe('ods-combobox behaviour', () => { expect(url.searchParams.get('odsCombobox')).toBe('value'); }); }); + + describe('keyboard navigation', () => { + it('should allow to select a value, delete it with keyboard and reselect it in single mode', async() => { + await setup(` + + Test value + + `); + const odsChangeSpy = await page.spyOnEvent('odsChange'); + + await openList(); + await input.press('ArrowDown'); + await input.press('Enter'); + await page.waitForChanges(); + + expect(await el.getProperty('value')).toBe('test'); + expect(await input.getProperty('value')).toBe('Test value'); + expect(odsChangeSpy).toHaveReceivedEventTimes(1); + + await input.press('Backspace'); + await page.waitForChanges(); + + expect(await el.getProperty('value')).toBe('test'); + expect(await input.getProperty('value')).toBe('Test valu'); + + await openList(); + await input.press('ArrowDown'); + await input.press('Enter'); + await page.waitForChanges(); + + expect(await el.getProperty('value')).toBe('test'); + expect(await input.getProperty('value')).toBe('Test value'); + }); + }); });