Skip to content

Commit

Permalink
fix(hooks): fix highlight on arrow key opening (#1591)
Browse files Browse the repository at this point in the history 
* fix(hooks): fix highlight on arrow key opening

* remove redundant tests
  • Loading branch information
@silviuaavram
silviuaavram committed Apr 3, 2024
1 parent 87a8137 commit b7f6765
Show file tree
Hide file tree
Showing 5 changed files with 443 additions and 133 deletions.
217 changes: 217 additions & 0 deletions src/hooks/useCombobox/__tests__/getInputProps.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -577,6 +577,81 @@ describe('getInputProps', () => {
)
})

test('initialHighlightedIndex is ignored if item is disabled', async () => {
const initialHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === initialHighlightedIndex
},
})

await keyDownOnInput('{ArrowUp}')

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(items.length - 1),
)
})

test('initialHighlightedIndex is ignored and defaultHighlightedIndex is chosen if enabled', async () => {
const initialHighlightedIndex = 0
const defaultHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
defaultHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === initialHighlightedIndex
},
})

await keyDownOnInput('{ArrowUp}')

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(defaultHighlightedIndex),
)
})

test('defaultHighlightedIndex is ignored if item is disabled', async () => {
const defaultHighlightedIndex = 2
renderCombobox({
defaultHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === defaultHighlightedIndex
},
})

await keyDownOnInput('{ArrowUp}')

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(items.length - 1),
)
})

test('both defaultHighlightedIndex and initialHighlightedIndex are ignored if items are disabled', async () => {
const initialHighlightedIndex = 1
const defaultHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
defaultHighlightedIndex,
isItemDisabled(item) {
return [
initialHighlightedIndex,
defaultHighlightedIndex,
].includes(items.indexOf(item))
},
})

await keyDownOnInput('{ArrowUp}')

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(items.length - 1),
)
})

test('it opens the closed menu and keeps focus on the combobox', async () => {
renderCombobox()

Expand Down Expand Up @@ -824,6 +899,81 @@ describe('getInputProps', () => {
expect(getItems()).toHaveLength(items.length)
})

test('initialHighlightedIndex is ignored if item is disabled', async () => {
const initialHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === initialHighlightedIndex
},
})

await keyDownOnInput('{ArrowDown}')

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(0),
)
})

test('initialHighlightedIndex is ignored and defaultHighlightedIndex is chosen if enabled', async () => {
const initialHighlightedIndex = 0
const defaultHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
defaultHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === initialHighlightedIndex
},
})

await keyDownOnInput('{ArrowDown}')

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(defaultHighlightedIndex),
)
})

test('defaultHighlightedIndex is ignored if item is disabled', async () => {
const defaultHighlightedIndex = 2
renderCombobox({
defaultHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === defaultHighlightedIndex
},
})

await keyDownOnInput('{ArrowDown}')

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(0),
)
})

test('both defaultHighlightedIndex and initialHighlightedIndex are ignored if items are disabled', async () => {
const initialHighlightedIndex = 1
const defaultHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
defaultHighlightedIndex,
isItemDisabled(item) {
return [
initialHighlightedIndex,
defaultHighlightedIndex,
].includes(items.indexOf(item))
},
})

await keyDownOnInput('{ArrowDown}')

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(0),
)
})

test('opens the closed menu and keeps focus on the button', async () => {
renderCombobox()

Expand Down Expand Up @@ -1816,6 +1966,73 @@ describe('getInputProps', () => {
defaultIds.getItemId(defaultHighlightedIndex),
)
})


test('initialHighlightedIndex is ignored if item is disabled', async () => {
const initialHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === initialHighlightedIndex
},
})

await clickOnInput()

expect(getInput()).toHaveAttribute('aria-activedescendant', '')
})

test('initialHighlightedIndex is ignored and defaultHighlightedIndex is chosen if enabled', async () => {
const initialHighlightedIndex = 0
const defaultHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
defaultHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === initialHighlightedIndex
},
})

await clickOnInput()

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(defaultHighlightedIndex),
)
})

test('defaultHighlightedIndex is ignored if item is disabled', async () => {
const defaultHighlightedIndex = 2
renderCombobox({
defaultHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === defaultHighlightedIndex
},
})

await clickOnInput()

expect(getInput()).toHaveAttribute('aria-activedescendant', '')
})

test('both defaultHighlightedIndex and initialHighlightedIndex are ignored if items are disabled', async () => {
const initialHighlightedIndex = 0
const defaultHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
defaultHighlightedIndex,
isItemDisabled(item) {
return [initialHighlightedIndex, defaultHighlightedIndex].includes(
items.indexOf(item),
)
},
})

await clickOnInput()

expect(getInput()).toHaveAttribute('aria-activedescendant', '')
})

})
})

Expand Down
65 changes: 0 additions & 65 deletions src/hooks/useCombobox/__tests__/props.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,71 +334,6 @@ describe('props', () => {
expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
})

test('initialHighlightedIndex is ignored if item is disabled', async () => {
const initialHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === initialHighlightedIndex
},
})

await clickOnInput()

expect(getInput()).toHaveAttribute('aria-activedescendant', '')
})

test('initialHighlightedIndex is ignored and defaultHighlightedIndex is chosen if enabled', async () => {
const initialHighlightedIndex = 0
const defaultHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
defaultHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === initialHighlightedIndex
},
})

await clickOnInput()

expect(getInput()).toHaveAttribute(
'aria-activedescendant',
defaultIds.getItemId(defaultHighlightedIndex),
)
})

test('defaultHighlightedIndex is ignored if item is disabled', async () => {
const defaultHighlightedIndex = 2
renderCombobox({
defaultHighlightedIndex,
isItemDisabled(item) {
return items.indexOf(item) === defaultHighlightedIndex
},
})

await clickOnInput()

expect(getInput()).toHaveAttribute('aria-activedescendant', '')
})

test('both defaultHighlightedIndex and initialHighlightedIndex are ignored if items are disabled', async () => {
const initialHighlightedIndex = 0
const defaultHighlightedIndex = 2
renderCombobox({
initialHighlightedIndex,
defaultHighlightedIndex,
isItemDisabled(item) {
return [initialHighlightedIndex, defaultHighlightedIndex].includes(
items.indexOf(item),
)
},
})

await clickOnInput()

expect(getInput()).toHaveAttribute('aria-activedescendant', '')
})

describe('inputValue', () => {
test('controls the state property if passed', async () => {
renderCombobox({isOpen: true, inputValue: 'Dohn Joe'})
Expand Down

0 comments on commit b7f6765

Please sign in to comment.