Skip to content

Commit

Permalink
fix(useCombobox): initial focus behaviour
Browse files Browse the repository at this point in the history
  • Loading branch information
silviuaavram committed Aug 1, 2023
1 parent 426cbed commit 70e5d5d
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 1 deletion.
24 changes: 24 additions & 0 deletions src/hooks/useCombobox/__tests__/getInputProps.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
mouseMoveItemAtIndex,
tab,
clickOnInput,
initialFocusAndOpenTestCases,
} from '../testUtils'
import utils from '../../utils'
import useCombobox from '..'
Expand Down Expand Up @@ -413,6 +414,29 @@ describe('getInputProps', () => {
})

describe('initial focus', () => {
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 */
}

test('is grabbed when isOpen is passed as true', () => {
renderCombobox({isOpen: true})

Expand Down
3 changes: 2 additions & 1 deletion src/hooks/useCombobox/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
useControlPropsValidator,
useElementIds,
getItemAndIndex,
getFocusOnOpenValue,
} from '../utils'
import {
getInitialState,
Expand Down Expand Up @@ -106,7 +107,7 @@ function useCombobox(userProps = {}) {
})
// Focus the input on first render if required.
useEffect(() => {
const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen
const focusOnOpen = getFocusOnOpenValue(initialIsOpen, defaultIsOpen, isOpen)

if (focusOnOpen && inputRef.current) {
inputRef.current.focus()
Expand Down
23 changes: 23 additions & 0 deletions src/hooks/useCombobox/testUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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],
]
13 changes: 13 additions & 0 deletions src/hooks/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -619,6 +619,18 @@ const commonDropdownPropTypes = {
scrollIntoView: PropTypes.func,
}

function getFocusOnOpenValue(initialIsOpen, defaultIsOpen, isOpenProp) {
if (isOpenProp !== undefined) {
return isOpenProp
}

if (initialIsOpen !== undefined) {
return initialIsOpen
}

return !!defaultIsOpen
}

export {
useControlPropsValidator,
useScrollIntoView,
Expand All @@ -640,4 +652,5 @@ export {
getChangesOnSelection,
commonDropdownPropTypes,
commonPropTypes,
getFocusOnOpenValue
}

0 comments on commit 70e5d5d

Please sign in to comment.