fix(useCombobox): prevent selection on mouse/touch blur (#1109)

downshift-js · Jul 4, 2020 · 8d60a76 · 8d60a76
1 parent b20f351
commit 8d60a76
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js
@@ -845,13 +845,14 @@ describe('getInputProps', () => {
         await changeInputValue(inputValue)
         blurInput()
 
-        expect(input.value).toBe(inputValue)
+        expect(input).toHaveValue(inputValue)
       })
 
       test('by mouse is not triggered if target is within downshift', () => {
         const stateReducer = jest.fn().mockImplementation(s => s)
         const {input, container} = renderCombobox({
           isOpen: true,
+          highlightedIndex: 0,
           stateReducer,
         })
         document.body.appendChild(container)
@@ -866,15 +867,29 @@ describe('getInputProps', () => {
 
         expect(stateReducer).toHaveBeenCalledTimes(1)
         expect(stateReducer).toHaveBeenCalledWith(
-          expect.objectContaining({}),
-          expect.objectContaining({type: stateChangeTypes.InputBlur}),
+          {
+            highlightedIndex: 0,
+            inputValue: '',
+            isOpen: true,
+            selectedItem: null,
+          },
+          expect.objectContaining({
+            type: stateChangeTypes.InputBlur,
+            changes: {
+              highlightedIndex: -1,
+              inputValue: '',
+              isOpen: false,
+              selectedItem: null,
+            },
+          }),
         )
       })
 
       test('by touch is not triggered if target is within downshift', () => {
         const stateReducer = jest.fn().mockImplementation(s => s)
         const {container, input} = renderCombobox({
           isOpen: true,
+          highlightedIndex: 0,
           stateReducer,
         })
         document.body.appendChild(container)
@@ -890,8 +905,21 @@ describe('getInputProps', () => {
 
         expect(stateReducer).toHaveBeenCalledTimes(1)
         expect(stateReducer).toHaveBeenCalledWith(
-          expect.objectContaining({}),
-          expect.objectContaining({type: stateChangeTypes.InputBlur}),
+          {
+            highlightedIndex: 0,
+            inputValue: '',
+            isOpen: true,
+            selectedItem: null,
+          },
+          expect.objectContaining({
+            type: stateChangeTypes.InputBlur,
+            changes: {
+              highlightedIndex: -1,
+              inputValue: '',
+              isOpen: false,
+              selectedItem: null,
+            },
+          }),
         )
       })
     })
@@ -919,7 +947,7 @@ describe('getInputProps', () => {
         })
         getMenuProps({}, {suppressRefError: true})
         getComboboxProps({}, {suppressRefError: true})
-        
+
         if (firstRender) {
           firstRender = false
           getInputProps({}, {suppressRefError: true})

diff --git a/src/hooks/useCombobox/index.js b/src/hooks/useCombobox/index.js
@@ -185,6 +185,7 @@ function useCombobox(userProps = {}) {
     () => {
       dispatch({
         type: stateChangeTypes.InputBlur,
+        selectItem: false,
       })
     },
   )
@@ -425,6 +426,7 @@ function useCombobox(userProps = {}) {
         if (!mouseAndTouchTrackersRef.current.isMouseDown) {
           dispatch({
             type: stateChangeTypes.InputBlur,
+            selectItem: true,
           })
         }
       }

diff --git a/src/hooks/useCombobox/reducer.js b/src/hooks/useCombobox/reducer.js
@@ -110,11 +110,12 @@ export default function downshiftUseComboboxReducer(state, action) {
     case stateChangeTypes.InputBlur:
       changes = {
         isOpen: false,
-        ...(state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex],
-          inputValue: props.itemToString(props.items[state.highlightedIndex]),
-          highlightedIndex: -1,
-        }),
+        highlightedIndex: -1,
+        ...(state.highlightedIndex >= 0 &&
+          action.selectItem && {
+            selectedItem: props.items[state.highlightedIndex],
+            inputValue: props.itemToString(props.items[state.highlightedIndex]),
+          }),
       }
       break
     case stateChangeTypes.InputChange:
@@ -157,7 +158,7 @@ export default function downshiftUseComboboxReducer(state, action) {
     case stateChangeTypes.FunctionSelectItem:
       changes = {
         selectedItem: action.selectedItem,
-        inputValue: props.itemToString(action.selectedItem)
+        inputValue: props.itemToString(action.selectedItem),
       }
       break
     case stateChangeTypes.ControlledPropUpdatedSelectedItem:

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -467,6 +467,7 @@ export interface UseComboboxDispatchAction<Item> {
   index?: number
   highlightedIndex?: number
   selectedItem?: Item | null
+  selectItem?: boolean
 }
 
 export interface UseComboboxStateChange<Item>