Skip to content

Component repeatedly calls setState inside componentWillUpdate #353

Open
@DaveHudson

Description

@DaveHudson

I'm seeing some odd behaviour with accessible-autocomplete/react when writing some tests in my app with Testing Library.

Basic tests to render the component work fine but if I interact with it and try to select an item from the autocomplete list the following error occurs:

Error: Uncaught [Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.]

A test case is on Codesandbox.io but running will crash the browser due to the repeated call to setState so best to download the zip and run locally if you wish to debug

https://codesandbox.io/s/accessible-autocomplete-7ulqz

The issue seems to be in the handleOptionClick() function when setting the clicked state as when that is removed everything works as expected, no repeated calls to setState and tests pass.

https://github.com/alphagov/accessible-autocomplete/blob/master/src/autocomplete.js#L277

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐛 bugSomething isn't working the way it should (including incorrect wording in documentation)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions