fix(useCombobox): tab to body should select element (#1517)

downshift-js · Jul 12, 2023 · 1730fbe · 1730fbe
1 parent 0d0bc32
commit 1730fbe
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 14 deletions.
diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js
@@ -1353,7 +1353,7 @@ describe('getInputProps', () => {
     })
 
     describe('on blur', () => {
-      test('the open menu will be closed and highlighted item will be selected', async () => {
+      test('by tab the open menu will be closed and highlighted item will be selected', async () => {
         const initialHighlightedIndex = 2
         renderCombobox({
           initialIsOpen: true,
@@ -1366,7 +1366,7 @@ describe('getInputProps', () => {
         expect(getInput()).toHaveValue(items[initialHighlightedIndex])
       })
 
-      test('the open menu will be closed and highlighted item will not be selected if the highlight by mouse leaves the menu', async () => {
+      test('by tab the open menu will be closed and highlighted item will not be selected if the highlight by mouse leaves the menu', async () => {
         const initialHighlightedIndex = 2
         renderCombobox({
           initialIsOpen: true,
@@ -1381,7 +1381,7 @@ describe('getInputProps', () => {
         expect(getInput()).toHaveValue('')
       })
 
-      test('the value in the input will stay the same', async () => {
+      test('by tab the value in the input will stay the same', async () => {
         const inputValue = 'test me'
         renderCombobox({
           initialIsOpen: true,
@@ -1470,17 +1470,51 @@ describe('getInputProps', () => {
         )
       })
 
-      test('the open menu will be closed and highlighted item will not be selected if the blur event related target is null', () => {
+      test('from the last element in the tab order, the open menu will be closed and highlighted item will be selected', () => {
         const stateReducer = jest.fn().mockImplementation(s => s)
-        const {container} = renderCombobox({
+        renderCombobox({
+          isOpen: true,
+          highlightedIndex: 0,
+          stateReducer,
+        })
+
+        // tab from the last element in the tab order ends up on the body.
+        const body = {}
+        const actualBody = document.body
+        global.document = {...document, activeElement: body, body}
+        fireEvent.blur(getInput(), {relatedTarget: null}) // and also has relatedTarget: null, like when blur is performed by tab change
+
+        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,
+            },
+          }),
+        )
+        global.document = {...document, body: actualBody}
+      })
+
+      test('by tab change the open menu will be closed and highlighted item will not be selected', () => {
+        const stateReducer = jest.fn().mockImplementation(s => s)
+        renderCombobox({
           isOpen: true,
           highlightedIndex: 0,
           stateReducer,
         })
         const input = getInput()
-        document.body.appendChild(container)
 
-        fireEvent.blur(input, {relatedTarget: null})
+        fireEvent.blur(input, {relatedTarget: null}) // to simulate blur by tab change
 
         expect(stateReducer).toHaveBeenCalledTimes(1)
         expect(stateReducer).toHaveBeenCalledWith(

diff --git a/src/hooks/useCombobox/index.js b/src/hooks/useCombobox/index.js
@@ -304,9 +304,10 @@ function useCombobox(userProps = {}) {
         'Pass either item or index to getItemProps!',
       )
 
-      const onSelectKey = isReactNative || isReactNativeWeb
-        ? /* istanbul ignore next (react-native) */ 'onPress'
-        : 'onClick'
+      const onSelectKey =
+        isReactNative || isReactNativeWeb
+          ? /* istanbul ignore next (react-native) */ 'onPress'
+          : 'onClick'
       const customClickHandler = isReactNative
         ? /* istanbul ignore next (react-native) */ onPress
         : onClick
@@ -412,9 +413,10 @@ function useCombobox(userProps = {}) {
       const inputHandleChange = event => {
         dispatch({
           type: stateChangeTypes.InputChange,
-          inputValue: isReactNative || isReactNativeWeb
-            ? /* istanbul ignore next (react-native) */ event.nativeEvent.text
-            : event.target.value,
+          inputValue:
+            isReactNative || isReactNativeWeb
+              ? /* istanbul ignore next (react-native) */ event.nativeEvent.text
+              : event.target.value,
         })
       }
       const inputHandleBlur = event => {
@@ -423,9 +425,13 @@ function useCombobox(userProps = {}) {
           latestState.isOpen &&
           !mouseAndTouchTrackersRef.current.isMouseDown
         ) {
+          const isBlurByTabChange =
+            event.relatedTarget === null &&
+            environment.document.activeElement !== environment.document.body
+
           dispatch({
             type: stateChangeTypes.InputBlur,
-            selectItem: event.relatedTarget !== null,
+            selectItem: !isBlurByTabChange,
           })
         }
       }