fix(useSelect): preventDefault on item props onMouseDown

downshift-js · Sep 25, 2023 · b24f2e6 · b24f2e6
1 parent 7d8c32d
commit b24f2e6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/src/hooks/useSelect/__tests__/getItemProps.test.js b/src/hooks/useSelect/__tests__/getItemProps.test.js
@@ -123,6 +123,44 @@ describe('getItemProps', () => {
       expect(result.current.highlightedIndex).toBe(1)
     })
 
+    test('event handler onMouseDown is called along with downshift handler', () => {
+      const userOnMouseDown = jest.fn()
+      const preventDefault = jest.fn()
+      const {result} = renderUseSelect({initialIsOpen: true})
+
+      act(() => {
+        const {onMouseDown} = result.current.getItemProps({
+          index: 1,
+          onMouseDown: userOnMouseDown,
+        })
+
+        onMouseDown({preventDefault})
+      })
+
+      expect(userOnMouseDown).toHaveBeenCalledTimes(1)
+      expect(preventDefault).toHaveBeenCalledTimes(1)
+    })
+
+    test("event handler onMouseDown is called without downshift handler if 'preventDownshiftDefault' is passed in user event", () => {
+      const userOnMouseDown = jest.fn(event => {
+        event.preventDownshiftDefault = true
+      })
+      const preventDefault = jest.fn()
+      const {result} = renderUseSelect({initialIsOpen: true})
+
+      act(() => {
+        const {onMouseDown} = result.current.getItemProps({
+          index: 0,
+          onMouseDown: userOnMouseDown,
+        })
+
+        onMouseDown({preventDefault})
+      })
+
+      expect(userOnMouseDown).toHaveBeenCalledTimes(1)
+      expect(preventDefault).not.toHaveBeenCalled()
+    })
+
     test("event handler onClick is called without downshift handler if 'preventDownshiftDefault' is passed in user event", () => {
       const userOnClick = jest.fn(event => {
         event.preventDownshiftDefault = true

diff --git a/src/hooks/useSelect/index.js b/src/hooks/useSelect/index.js
@@ -451,6 +451,7 @@ function useSelect(userProps = {}) {
       index: indexProp,
       onMouseMove,
       onClick,
+      onMouseDown,
       onPress,
       refKey = 'ref',
       disabled: disabledProp,
@@ -489,6 +490,7 @@ function useSelect(userProps = {}) {
           index,
         })
       }
+      const itemHandleMouseDown = e => e.preventDefault()
 
       const itemProps = {
         [refKey]: handleRefs(ref, itemNode => {
@@ -516,6 +518,10 @@ function useSelect(userProps = {}) {
         onMouseMove,
         itemHandleMouseMove,
       )
+      itemProps.onMouseDown = callAllEventHandlers(
+        onMouseDown,
+        itemHandleMouseDown,
+      )
 
       return itemProps
     },

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -425,7 +425,7 @@ export interface UseSelectGetItemPropsOptions<Item>
     GetPropsWithRefKey {}
 
 export interface UseSelectGetItemPropsReturnValue
-  extends Omit<GetItemPropsReturnValue, 'onMouseDown'> {
+  extends GetItemPropsReturnValue {
   'aria-disabled': boolean
   ref?: React.RefObject<any>
 }