Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CollapseCard issue with StoryBook #892

Closed
jmittelette opened this issue Mar 4, 2021 · 4 comments
Closed

CollapseCard issue with StoryBook #892

jmittelette opened this issue Mar 4, 2021 · 4 comments
Labels
Type: Bug Something isn't working
Milestone

Comments

@jmittelette
Copy link
Contributor

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 arnaudforaison added the Type: Bug Something isn't working label Mar 4, 2021
@arnaudforaison arnaudforaison added this to the v1.4.1 milestone Mar 4, 2021
@arnaudforaison
Copy link
Contributor

Peut être utiliser useLayoutEffect ?

@sisko59
Copy link
Contributor

sisko59 commented Mar 26, 2021

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
Copy link
Contributor

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

@jmittelette
Copy link
Contributor Author

Bug fixé en 1.4.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants