If the component is open while it's being triggered through a state change the component stops functioning

Describe the bug When opening the Collapsible component via a mouse click and then triggering the component to open/close via a state change of the parent component by passing through a value via the open API the component stop functioning all together.

To Reproduce

1. Wait for the app to load
2. Click on Accordion #1 (doesn’t really matter which one)
3. Click on the checkbox above to open all Collapsible components on the page 4a. Click again on the checkbox and nothing will happen to Accordion #1 4b. Click again on Accordion #1 and nothing will happen
4. The component has stopped working

Here’s a sandbox already setup with the https://codesandbox.io/s/dark-star-t2g3ou?file=/src/App.js

Expected behavior The component should open/close normally

Authors notes If this is somehow my fault for not fully understanding reacts hooks lifecycle or in general my mistake, but I’m still new to react

[karltaylor]

After a quick look it looks to be that this line of code is the culprit

    if (
      (prevState.height === 'auto' || prevState.height === 0) && // here.
      this.state.shouldSwitchAutoOnNextCycle === true
    ) {
      window.clearTimeout(this.timeout);
      this.timeout = window.setTimeout(() => {
        // Set small timeout to ensure a true re-render
        this.setState({
          height: 0,
          overflow: 'hidden',
          isClosed: true,
          shouldSwitchAutoOnNextCycle: false,
        });
      }, 50);
    }

I’ve removed and it seems to be working so if you want a quick fix you can fork the repo and edit and use that fork or use something like patch-package.

I’m just wanting to do a few more tests before deploying.

Best

[karltaylor]

Edited: to remove the mentions of other issues as I believe you didn’t mean to do that but was just using a # which will reference an issue/pr.

Confirmed as bug 😃