fix(useCombobox): Ensure highlighted index is not selected on browser…

… tab change (#1484)

Related issue - #1471

Co-authored-by: Alice Hendicott <alice.hendicott@rea-group.com>

src/hooks/useCombobox/__tests__/getInputProps.test.js

@@ -1460,6 +1460,38 @@ describe('getInputProps', () => {
           }),
         )
       })
+
+      test('the open menu will be closed and highlighted item will not be selected if the blur event related target is null', () => {
+        const stateReducer = jest.fn().mockImplementation(s => s)
+        const {container} = renderCombobox({
+          isOpen: true,
+          highlightedIndex: 0,
+          stateReducer,
+        })
+        const input = getInput()
+        document.body.appendChild(container)
+
+        fireEvent.blur(input, {relatedTarget: null})
+
+        expect(stateReducer).toHaveBeenCalledTimes(1)
+        expect(stateReducer).toHaveBeenCalledWith(
+          {
+            highlightedIndex: 0,
+            inputValue: '',
+            isOpen: true,
+            selectedItem: null,
+          },
+          expect.objectContaining({
+            type: stateChangeTypes.InputBlur,
+            changes: {
+              highlightedIndex: -1,
+              inputValue: '',
+              isOpen: false,
+              selectedItem: null,
+            },
+          }),
+        )
+      })
     })
 
     describe('on focus', () => {

src/hooks/useCombobox/index.js

@@ -416,15 +416,15 @@ function useCombobox(userProps = {}) {
             : event.target.value,
         })
       }
-      const inputHandleBlur = () => {
+      const inputHandleBlur = event => {
         /* istanbul ignore else */
         if (
           latestState.isOpen &&
           !mouseAndTouchTrackersRef.current.isMouseDown
         ) {
           dispatch({
             type: stateChangeTypes.InputBlur,
-            selectItem: true,
+            selectItem: event.relatedTarget !== null,
           })
         }
       }