You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
During end-2-end testing of our application we search for something called 'outcrops' using filters to narrow down the search.
These filters are picked using AutoComplete, where we load up a list of filters, and disable the ones that are not relevant.
Meaning that if no outcrop exists with the parameter England, based on the filters we have chosen, we disable England but show it in the AutoComplete list.
Now during testing, I've set it up so that we go through a set of these filters and make sure everything match up. So that no outcrop shows up that should be filtered away. It's while doing this the "RangeError: Maximum call stack size exceeded" occurs.
And according to the error message, this happens in the findIndex function, which from what I gather only exists in the AutoComplete.
Steps to reproduce the bug
I freshly installed the repo to test this, and was able to reproduce in a smaller controlled test:
Set up the design-system repo
Find the AutoComplete.test.tsx
Add in more items to the items list
i.e. const items = ['One', 'Two', 'Three', 'Four', 'five', 'six', 'seven', 'eight']
Modify the "it('Second option is first when first option is disabled', async ()" test:
it('Second option is first when first option is disabled', async () => {
render(
<Autocomplete
options={items}
label={labelText}
optionDisabled={(item) => item === item} // Easy way to set true on all items
/>,
)
const labeledNodes = await screen.findAllByLabelText(labelText)
const input = labeledNodes[0]
const optionsList = labeledNodes[1]
fireEvent.keyDown(input, { key: 'ArrowDown' })
const options = await within(optionsList).findAllByRole('option')
expect(options).toHaveLength(2) // since one option is disabled
expect(await within(options[0]).findByText(items[1])).toBeDefined()
const withDisabledOptions = await within(optionsList).findAllByRole(
'option',
{
hidden: true,
},
)
expect(withDisabledOptions[0]).toHaveAttribute('aria-hidden')
expect(
await within(withDisabledOptions[0]).findByText(items[0]),
).toBeDefined()
})
Run the test
Expected behavior
Not entering a recursive loop I suppose. Having the AutoComplete simply being able to show more than a few disabled options.
Specifications
Version: newest
Browser: Na
OS: Windows
Additional context
The text was updated successfully, but these errors were encountered:
I see findIndex is a recursive function that tries to find the first available item to focus on, but it doesn't take into account that all items could be disabled 😅. We'll fix this 👍
Describe the bug
During end-2-end testing of our application we search for something called 'outcrops' using filters to narrow down the search.
These filters are picked using AutoComplete, where we load up a list of filters, and disable the ones that are not relevant.
Meaning that if no outcrop exists with the parameter England, based on the filters we have chosen, we disable England but show it in the AutoComplete list.
Now during testing, I've set it up so that we go through a set of these filters and make sure everything match up. So that no outcrop shows up that should be filtered away. It's while doing this the "RangeError: Maximum call stack size exceeded" occurs.
And according to the error message, this happens in the findIndex function, which from what I gather only exists in the AutoComplete.
Steps to reproduce the bug
I freshly installed the repo to test this, and was able to reproduce in a smaller controlled test:
i.e. const items = ['One', 'Two', 'Three', 'Four', 'five', 'six', 'seven', 'eight']
Expected behavior
Not entering a recursive loop I suppose. Having the AutoComplete simply being able to show more than a few disabled options.
Specifications
Additional context
The text was updated successfully, but these errors were encountered: