Skip to content

Commit

Permalink
feat(useSelect): focus toggle when opened initially (#1527)
Browse files Browse the repository at this point in the history
  • Loading branch information
silviuaavram authored Aug 2, 2023
1 parent 883a458 commit 90d6d72
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 11 deletions.
39 changes: 28 additions & 11 deletions src/hooks/useSelect/__tests__/getToggleButtonProps.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
} from '../../testUtils'
import useSelect from '..'
import * as stateChangeTypes from '../stateChangeTypes'
import { initialFocusAndOpenTestCases } from '../../useCombobox/testUtils'

describe('getToggleButtonProps', () => {
describe('hook props', () => {
Expand Down Expand Up @@ -256,6 +257,31 @@ describe('getToggleButtonProps', () => {
})
})

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}`, () => {
renderSelect({isOpen, defaultIsOpen, initialIsOpen})

if (status) {
expect(getToggleButton()).toHaveFocus()
expect(getItems()).toHaveLength(items.length)
} else {
expect(getToggleButton()).not.toHaveFocus()
expect(getItems()).toHaveLength(0)
}
})
/* eslint-enable */
}
})

describe('event handlers', () => {
describe('on click', () => {
test('opens the closed menu', async () => {
Expand Down Expand Up @@ -1429,11 +1455,7 @@ describe('getToggleButtonProps', () => {
)
})

// focus the toggle button in 2 tabs
await tab()
await tab()

// now blur
// focus is already on the toggle button, tab should blur
await tab()

expect(getItems()).toHaveLength(0)
Expand Down Expand Up @@ -1463,7 +1485,6 @@ describe('getToggleButtonProps', () => {
},
)

await tab()
await mouseMoveItemAtIndex(defaultHighlightedIndex)
await mouseLeaveItemAtIndex(defaultHighlightedIndex)
await tab()
Expand Down Expand Up @@ -1518,11 +1539,7 @@ describe('getToggleButtonProps', () => {
)
})

// focus the toggle button in 2 tabs
await tab()
await tab()

// now blur
// focus is already on the toggle button, tab should blur
await tab(true)

expect(getItems()).toHaveLength(0)
Expand Down
10 changes: 10 additions & 0 deletions src/hooks/useSelect/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
useElementIds,
useMouseAndTouchTracker,
getItemAndIndex,
getInitialValue,
} from '../utils'
import {
callAllEventHandlers,
Expand Down Expand Up @@ -142,6 +143,15 @@ function useSelect(userProps = {}) {

previousResultCountRef.current = items.length
})
// Focus the toggle button on first render if required.
useEffect(() => {
const focusOnOpen = getInitialValue(props, 'isOpen')

if (focusOnOpen && toggleButtonRef.current) {
toggleButtonRef.current.focus()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
// Add mouse/touch events to document.
const mouseAndTouchTrackersRef = useMouseAndTouchTracker(
isOpen,
Expand Down

0 comments on commit 90d6d72

Please sign in to comment.