fix(useCombobox): initial focus behaviour (#1526)

* fix(useCombobox): initial focus behaviour * use getInitialValue * remove unneeded tests
downshift-js · Aug 2, 2023 · cae0884 · cae0884
1 parent b498830
commit cae0884
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 26 deletions.
diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js
@@ -16,6 +16,7 @@ import {
   mouseMoveItemAtIndex,
   tab,
   clickOnInput,
+  initialFocusAndOpenTestCases,
 } from '../testUtils'
 import utils from '../../utils'
 import useCombobox from '..'
@@ -413,29 +414,28 @@ describe('getInputProps', () => {
   })
 
   describe('initial focus', () => {
-    test('is grabbed when isOpen is passed as true', () => {
-      renderCombobox({isOpen: true})
-
-      expect(getInput()).toHaveFocus()
-    })
-
-    test('is grabbed when initialIsOpen is passed as true', () => {
-      renderCombobox({initialIsOpen: true})
-
-      expect(getInput()).toHaveFocus()
-    })
-
-    test('is grabbed when defaultIsOpen is passed as true', () => {
-      renderCombobox({defaultIsOpen: true})
-
-      expect(getInput()).toHaveFocus()
-    })
-
-    test('is not grabbed when initial open is set to default (false)', () => {
-      renderCombobox()
-
-      expect(getInput()).not.toHaveFocus()
-    })
+    for (const [
+      initialIsOpen,
+      defaultIsOpen,
+      isOpen,
+      status,
+    ] of initialFocusAndOpenTestCases) {
+      /* eslint-disable */
+      test(`is ${
+        status ? '' : 'not '
+      }grabbed when initialIsOpen: ${initialIsOpen}, defaultIsOpen: ${defaultIsOpen} and props.isOpen: ${isOpen}`, () => {
+        renderCombobox({isOpen, defaultIsOpen, initialIsOpen})
+
+        if (status) {
+          expect(getInput()).toHaveFocus()
+          expect(getItems()).toHaveLength(items.length)
+        } else {
+          expect(getInput()).not.toHaveFocus()
+          expect(getItems()).toHaveLength(0)
+        }
+      })
+      /* eslint-enable */
+    }
   })
 
   describe('event handlers', () => {

diff --git a/src/hooks/useCombobox/index.js b/src/hooks/useCombobox/index.js
@@ -11,6 +11,7 @@ import {
   useControlPropsValidator,
   useElementIds,
   getItemAndIndex,
+  getInitialValue,
 } from '../utils'
 import {
   getInitialState,
@@ -31,8 +32,6 @@ function useCombobox(userProps = {}) {
     ...userProps,
   }
   const {
-    initialIsOpen,
-    defaultIsOpen,
     items,
     scrollIntoView,
     environment,
@@ -106,7 +105,7 @@ function useCombobox(userProps = {}) {
   })
   // Focus the input on first render if required.
   useEffect(() => {
-    const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen
+    const focusOnOpen = getInitialValue(props, 'isOpen')
 
     if (focusOnOpen && inputRef.current) {
       inputRef.current.focus()

diff --git a/src/hooks/useCombobox/testUtils.js b/src/hooks/useCombobox/testUtils.js
@@ -117,3 +117,26 @@ function DropdownCombobox({renderSpy, renderItem, ...props}) {
 export const renderUseCombobox = props => {
   return renderHook(() => useCombobox({items, ...props}))
 }
+
+// format is: [initialIsOpen, defaultIsOpen, props.isOpen, menu is open && input is focused]
+export const initialFocusAndOpenTestCases = [
+  [undefined, undefined, undefined, false],
+  [undefined, undefined, true, true],
+  [true, true, true, true],
+  [true, false, true, true],
+  [false, true, true, true],
+  [false, false, true, true],
+  [undefined, undefined, false, false],
+  [true, true, false, false],
+  [true, false, false, false],
+  [false, true, false, false],
+  [false, false, false, false],
+  [false, undefined, undefined, false],
+  [false, false, undefined, false],
+  [false, true, undefined, false],
+  [true, undefined, undefined, true],
+  [true, false, undefined, true],
+  [true, true, undefined, true],
+  [undefined, false, undefined, false],
+  [undefined, true, undefined, true],
+]