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

[zedy]

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]

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 :)

[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

[zedy]

@karltaylor Glad I could be of service. Hope it's not to much trouble. I'll wait for an official patch to be released. Thanks for looking into this so quickly. Cheers

[zedy]

Hi @karltaylor just want to check in on this, will there be a patch in the near future for this issue, or should I just use PatchPackage? 😊

[tomHsieh85]

+1 has the fix been patch? thanks!!

[ray1996824]

Hi @karltaylor is this bug fixed?

[edgeboy47]

For anyone facing this issue, I found a small workaround in the meantime. You can just manually control the open prop with a useState variable, and set the handleTriggerClick prop on the Collapse to manage that useState variable.