Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RangeError: Maximum call stack size exceeded #3521

Closed
Harsku opened this issue Jun 14, 2024 · 1 comment · Fixed by #3534
Closed

RangeError: Maximum call stack size exceeded #3521

Harsku opened this issue Jun 14, 2024 · 1 comment · Fixed by #3534
Assignees
Labels
🐛 bug Something isn't working

Comments

@Harsku
Copy link

Harsku commented Jun 14, 2024

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:

  1. Set up the design-system repo
  2. Find the AutoComplete.test.tsx
  3. Add in more items to the items list
    i.e. const items = ['One', 'Two', 'Three', 'Four', 'five', 'six', 'seven', 'eight']
  4. 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()
  })
  1. 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
image

@Harsku Harsku added the 🐛 bug Something isn't working label Jun 14, 2024
@oddvernes
Copy link
Collaborator

oddvernes commented Jun 19, 2024

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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants