diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js index bd776ee9..229a206d 100644 --- 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 index 2a3dc05a..b8705ebd 100644 --- 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 index 2930e205..cab6042f 100644 --- 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], +]