CollapseCard issue with StoryBook

[jmittelette]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @axa-fr/react-toolkit-collapse@1.4.0 for the project I'm working on.

On our project we get the following error on every stories using a CollaspeCard:
TypeError: Cannot read property 'style' of nullat node_modules/@axa-fr/react-toolkit-collapse/dist/Body.js:26:27
at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
at flushPassiveEffectsImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14591:9)
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:646:12)
at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
at flushPassiveEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13380:3)
at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:646:12)
at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13004:9)
at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16454:3)
at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17149:3)
at Object. (src/InstantiatePattern/InstantiatePatternStep1/InstantiatePatternStep1.component.spec.js:34:8)

Here is the diff that solved my problem:

diff --git a/node_modules/@axa-fr/react-toolkit-collapse/dist/Body.js b/node_modules/@axa-fr/react-toolkit-collapse/dist/Body.js
index dc1729c..fb56f21 100644
--- a/node_modules/@axa-fr/react-toolkit-collapse/dist/Body.js
+++ b/node_modules/@axa-fr/react-toolkit-collapse/dist/Body.js
@@ -22,7 +22,7 @@ var Body = function (_a) {
     var children = _a.children, collapse = _a.collapse, className = _a.className, classModifier = _a.classModifier, ariaLabelledby = _a.ariaLabelledby, id = _a.id;
     var panel = react_1.default.useRef();
     react_1.default.useEffect(function () {
-        if (panel) {
+        if (panel && panel.current) {
             panel.current.style.maxHeight = collapse ? '100vh' : '0';
         }
     }, [collapse]);
diff --git a/node_modules/@axa-fr/react-toolkit-collapse/src/Body.tsx b/node_modules/@axa-fr/react-toolkit-collapse/src/Body.tsx
index a37bbc7..87d2816 100644
--- a/node_modules/@axa-fr/react-toolkit-collapse/src/Body.tsx
+++ b/node_modules/@axa-fr/react-toolkit-collapse/src/Body.tsx
@@ -27,7 +27,7 @@ const Body = ({
   const panel = React.useRef<HTMLDivElement>();
 
   React.useEffect(() => {
-    if (panel) {
+    if (panel && panel.current) {
       panel.current.style.maxHeight = collapse ? '100vh' : '0';
     }
   }, [collapse]);

This issue body was partially generated by patch-package.

[arnaudforaison]

Peut être utiliser useLayoutEffect ?

[sisko59]

L'erreur arrive car on utilise l'option multiSnapshotWithOptions pour storybook.
Cette option nous permet d'avoir une snapshot pour chaque composant plutôt qu'un gros fichier pas lisible dans les PRs.
https://github.com/sisko59/reat-toolkit-error-multiSnapshotWithOptions

[arnaudforaison]

Et pourquoi le multisnapshot produit une erreur ? Est ce qu'une issue est ouverte sur cette addon ?

[jmittelette]

Bug fixé en 1.4.1