Since switching to createRoute (concurrent React), inline styles are sometimes not updated

[adrienharnay]

Hello,

Since switching to React 18 and react-dom/client's createRoute, when I try to open the Collapse (passing isExpanded: true to getCollapseProps) after the first render the inline styles don't get updated: https://gyazo.com/9c552baad3819a12908c12a85288e223. I need to set isExpanded to false, and then to true for the inline styles to be correct.

I don't have this issue with React.render (non-concurrent React API).

Thanks in advance and have a great day!

[adrienharnay]

Reverting to 3.3.2 (without #98) fixes the issue. Any idea how upgrading and using React's useId could generate this bug? cc. @gaearon @roginfarrer

I was wrong. 3.3.2 has the bug as well. The bug is only related to the usage of createRoot instead of render, and only when you don't mount children when isExpanded === false.

Here is a Sandbox reproducing the bug: https://codesandbox.io/s/sweet-mountain-u7docf. You can change the import:

import { CollapseWithoutBug as Collapse } from "./Collapse";

to

import { CollapseWithBug as Collapse } from "./Collapse";

to trigger the bug.

You can also change the rendering method (switch back to render) to notice both versions are working.

To sum it up:

• using react-dom's render, the bug never occurs
• using react-dom/client's createRoot, the bug does not occur if children are always mounted
• using react-dom/client's createRoot, if children are unmounted (see CollapseWithBug), the bug occurs

Maybe related to #72 ?

[adrienharnay]

OK so I tested again after adding logs everywhere to try and understand the root cause. It would seem that when the bug occurs, the onTransitionEnd handler passed to the child element is not called by React... 🫠 Is it a side-effect or the root cause?

[github-actions]

🎉 This issue has been resolved in version 3.7.0 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 3.8.0 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[roginfarrer]

Meant to release at v4@next, but couldn't figure out the magic words for semantic-release 🤷🏻. Can you try testing with react-collapsed@next @adrienharnay?

[adrienharnay]

Hello, sorry for the delay. I just tested and got the useId is not a function error

Versions:

I have also tested with 4.0.0, same result.

[adrienharnay]

Hello, have you had a chance to look at the error? Thanks in advance @roginfarrer

[roginfarrer]

I've briefly looked at it and I can replicate, but I'm not 100% sure why that's happening. I have a major refactor ongoing in #122, and I'm hoping this issue resolves itself