fix(useSelect): preventDefault on item props onMouseDown (#1547)

* fix(useSelect): preventDefault on item props onMouseDown * add another test
downshift-js · Sep 25, 2023 · 05ffa9c · 05ffa9c
1 parent b24f2e6
commit 05ffa9c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/hooks/useCombobox/index.js b/src/hooks/useCombobox/index.js
@@ -334,7 +334,7 @@ function useCombobox(userProps = {}) {
           index,
         })
       }
-      const itemHandleMouseDown = e => e.preventDefault()
+      const itemHandleMouseDown = e => e.preventDefault() // keep focus on the input after item click select.
 
       return {
         [refKey]: handleRefs(ref, itemNode => {

diff --git a/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js b/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js
@@ -1709,6 +1709,24 @@ describe('getToggleButtonProps', () => {
     })
 
     describe('blur', () => {
+      test('with the menu closed does nothing', async () => {
+        const initialHighlightedIndex = 2
+        renderSelect({initialHighlightedIndex}, ui => {
+          return (
+            <>
+              {ui}
+              <div tabIndex={0}>Second element</div>
+            </>
+          )
+        })
+
+        await tab() // focus the button
+        screen.getByText(/Second element/).focus()
+
+        expect(getItems()).toHaveLength(0)
+        expect(getToggleButton()).not.toHaveTextContent()
+      })
+
       test('by focusing another element should behave as a normal blur', async () => {
         const initialHighlightedIndex = 2
         renderSelect({initialIsOpen: true, initialHighlightedIndex}, ui => {

diff --git a/src/hooks/useSelect/index.js b/src/hooks/useSelect/index.js
@@ -490,7 +490,7 @@ function useSelect(userProps = {}) {
           index,
         })
       }
-      const itemHandleMouseDown = e => e.preventDefault()
+      const itemHandleMouseDown = e => e.preventDefault() // keep focus on the toggle after item click select.
 
       const itemProps = {
         [refKey]: handleRefs(ref, itemNode => {