Giters

glennflanagan / react-collapsible

React component to wrap content in Collapsible element with trigger to open and close.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Collapsible gets stuck when content is empty or zero-height

thomasjm opened this issue · comments

commented

Describe the bug

This component depends on the onTransitionEnd event being fired to update its internal state. However, if the content of the collapsible is empty, then no transition happens and thus onTransitionEnd doesn't fire, leaving the component stuck.

As a result, if you have a component with empty (or zero-height) content that's open, and then close it, it will get stuck in the closed position.

To Reproduce

I made a repro by adapting the "example" code. I'm on Chrome 86.

git clone git@github.com:thomasjm/react-collapsible.git
cd react-collapsible
npm run example
# Click on the collapsible once and it will go from open -> closed
# Click on it a second time and it won't re-open

Expected behavior
Collapsible should open and close when clicked, even if the content is empty.

commented

I think I understand the bug - but can I ask why you’d want to use the collapsible if there’s nothing in it? Am I missing something?

commented

If you have dynamic content in there, it could easily be empty at some points.

For example, I'm using this to make a collapsible display of the list of symbols found in a source file, like an IDE might have. If no symbols exist, the collapsible is empty. It's unfortunate if the user then tries to open/close it and gets it permanently stuck.

commented

Got it. That makes sense.

As a workaround you could use a key prop on the Collapsible which changes when the content changes which would cause a re-render of the entire collapsible. Not ideal but might get you going while someone works on a PR to fix this.

commented

Hey @thomasjm, fixed this issue in #178, give it a once over just to double check

commented

Works for me in the example. Also works in my app. Thanks for the fast turnaround!

commented

Note: having built your branch and npm link-ed it into my project, I do get a new TypeScript error:

TS2786: 'Collapsible' cannot be used as a JSX component.
  Its instance type 'Collapsible' is not a valid JSX element.

Not sure what this is about since it looks fine and seems to work. Maybe just due to how I linked it or something, but thought I'd mention it.

Any chance you could release the fix to NPM?

commented

@thomasjm I got this when using yarn link too, however, it did not appear when installing the branch directly, e.g

yarn add https://github.com/glennflanagan/react-collapsible.git\#fix/177-open-close-with-zero-height

It was into a fresh next.js app and worked fine, it might be something to do with the way types are referenced when using link so I'm going to leave it for now.

I'm not at my pc at the moment but should be able to release a patch version later on today.

commented

@thomasjm released in v2.8.2