Instantly collapses on first collapse about react-collapse HOT 11 CLOSED

That is happening most likely because content height of your collapse cannot be determined. Maybe some styles are loaded with extra delay for example. In the example I have a situation with collapse opened by default and it closes smoothly. We also have bunch of examples in our project and they all work as expected.

Height measurement is pretty tricky, css-dependent and subject to many other odds. Sometimes you have to debug why that thing does not do what it should =(. Also there are some sacrifices in react-height for the sake of performance.

We also have react-element-resize which is not as performant but very accurate and sometimes we use it for vertical/horizontal animations. I need to figure out the way how to allow to use it instead of react-height when performance is not that critical (not when you render 1000 collapsible rows table, but some singled out blocks).

from react-collapse.

I just try by not having the children rendered and set the div inside the collapse element to 100px and it still closes instantly
Here is the my code for rendering the collapse component

if (typeof this.props.children !== 'undefined') {
     return <Collapse isOpened={ this.state.expanded } >
          <div className="treeview-children" style={{ height: '100px' }}></div>
     </Collapse>
}

from react-collapse.

I need more context to figure out what is not working in your case. This piece of code alone is not different for anything you can find in examples.

Everything actually matters. CSS too.

from react-collapse.

Would using rem and em cause this issue?

from react-collapse.

We use em/rems everywhere and do not have this problem.

See nkbt/react-height#11 - might be your case

from react-collapse.

I have this same issue when i set the keepCollapsedContent flag

from react-collapse.

Yeah, that is an issue

I reckon it happens because collapse renders content in this case (even if it is closed). It also sets defaultStyles to have height of the content and after that - changes it to 0.

Ideally defaultStyles should be removed entirely, tho it would mean some decent code refactoring.

Not sure I am able to spend my personal time for it these days (I have an extra project to finish).
And since in our work projects we do not use collapse in this way - there are no issues with collapse in last half a year and no issues to fix :(

Would be very very happy with PR to fix it.

from react-collapse.

Published

22:17 $ npm publish

> [email protected] prepublish /Users/nkbt/nkbt/react-collapse
> parallelshell -w "npm run build:lib -s" "npm run build:dist -s" "npm run build:min -s"

src/Collapse.js -> lib/Collapse.js
src/index.js -> lib/index.js
Hash: 81af8379a7c807940f49
Version: webpack 1.13.1
Time: 3765ms
                Asset     Size  Chunks             Chunk Names
    react-collapse.js    17 kB       0  [emitted]  main
react-collapse.js.map  21.2 kB       0  [emitted]  main
    + 8 hidden modules
Hash: 9bf68841c3a8ddfd7232
Version: webpack 1.13.1
Time: 3952ms
                    Asset     Size  Chunks             Chunk Names
    react-collapse.min.js   5.8 kB       0  [emitted]  main
react-collapse.min.js.map  40.7 kB       0  [emitted]  main
    + 8 hidden modules
+ [email protected]

Please, reopen if issue is still not fixed.

from react-collapse.

@nkbt I have same issue with version 2.3.3, and it sounds exactly like you described height measurement case. In my case I have nested Collapse components. Parent component is closed by default and children are open.
Another simpler use case is mounting components asynchronously, like

{loaded ? 
  <Collapse isOpened>
    <FiltersContainer />
  </Collapse>
}

Is there way around how to set / reset height explicitly?

from react-collapse.

Actually version 3.2.0 works much better in this regard.

from react-collapse.

from react-collapse.