feat(@dpc-sdp/ripple-ui-forms): use selectionStart for handling the l…

…eft arrow key
dpc-sdp · Dec 10, 2024 · c6698cd · c6698cd
1 parent 2237a7f
commit c6698cd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git 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
@@ -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
   }