diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts index cc33c4f7f..26594f0dc 100644 --- a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts +++ b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.cy.ts @@ -295,6 +295,21 @@ describe('RplFormDropDown', () => { }) }) + it('selecting the only matching option clears the search input', () => { + cy.mount(RplFormDropDown, { + props: { + ...props, + multiple: true, + searchable: true + } + }) + + cy.get(input).click() + cy.focused().type('Gra{enter}') + cy.get(tagItem).contains('Grapes') + cy.get(search).should('have.value', '') + }) + it('displays tags with the number of hidden selected options when closed', () => { cy.viewport(960, 680) cy.mount(RplFormDropDown, { @@ -422,5 +437,8 @@ describe('RplFormDropDown', () => { cy.focused().contains('Orange') cy.focused().type('{rightarrow}') cy.get(search).should('have.focus') + + cy.focused().type('ap{leftarrow}{leftarrow}{leftarrow}') + cy.focused().contains('Orange') }) }) diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue index daef1d85e..9f3850b7b 100644 --- a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue +++ b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue @@ -224,9 +224,9 @@ const handleSearchSubmit = () => { // Jump to the tag list when navigating left of an empty search input const handleSearchLeft = () => { if ( - !searchValue.value && multiSearch.value && - selectedOptions.value?.length + selectedOptions.value?.length && + searchRef.value?.selectionStart === 0 ) { focusTag.value = focusTag.value + 1 }