Instantly collapses on first collapse

[bdely]

I have a component list and each item could have a set of children react-collapse wraps the children component. When I collapse an item the first time it collapses instantly and after that it works fine.
it is really noticeable when my component in the list has a button that can toggle the status if that item to enable or disable, and when I toggle any item for the first time all children collapse instantly and then reopen, but the state of it being opened was never changed.
It seems that it is happening on the first state change update after it was initialized. If I change isOpened to be false by default it is not an issue

[nkbt]

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

[bdely]

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>
}

[nkbt]

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.

[bdely]

Would using rem and em cause this issue?

[nkbt]

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

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

[jooj123]

I have this same issue when i set the keepCollapsedContent flag

[nkbt]

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.

[nkbt]

Published

22:17 $ npm publish

> react-collapse@2.3.3 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
+ react-collapse@2.3.3

Please, reopen if issue is still not fixed.

[ilionic]

@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?

[ilionic]

Actually version 3.2.0 works much better in this regard.

[nkbt]

Yeah, v3 was a rewrite that fixed heaps of issues. I need to publish it properly...

…

On Wed, 28 Dec 2016 at 22:28, ilia onic ***@***.***> wrote: Actually version 3.2.0 works much better in this regard. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#55 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKsoPUGcYLpg4Pe6F2cn1fI3rrC3e3pks5rMlXDgaJpZM4I6Eg5> .