Storybook 'freezes' on specific component

[KadoBOT]

I'm not sure if some incompatibility with my component, storybook bug or I did something wrong, but if I switch to 'Checkbox' story I can't go back to the other stories. I can click on any left menu item, but the changes are not reflected. The 'Button' story works tho. If I refresh the page on any of the checkbox stories, it shows the desired state, but I can see another story without refreshing it again.

This is the repo that I'm talking about: https://github.com/KadoBOT/reacterialize/blob/master/src/stories/index.js

[shilman]

@KadoBOT looks like a bug. have you tried stripping down the component in question? I noticed there's a lot going on in Checkbox, e.g. unmounting logic. Removng this temporarily might help isolate what's causing the problem.

[KadoBOT]

@shilman not yet. Let me try, and I'll let you know what is causing the problem.

[KadoBOT]

Looks like is something related to the element 'ref'. In the setRef method, if I set the ref based on the element id, it works. But if not, It throws a bunch of errors (i.e ref={ref => {this.foo = ref}}.

So my guess is that is not a bug with storybook but with referencing the element inside the component.

[shilman]

@KadoBOT thanks for tracking that down. it could still be a "bug" that storybook doesn't insulate you from this kind of thing, or swallows the error messages, or something. i'll leave this open for a bit in case anybody else has any thoughts on it. if not, i'll close it in a week or so if that's cool with you!

[KadoBOT]

Yes, leave that open. I also think it is swallowing error messages.

[switz]

I'm also seeing this on some malformed components, but I'm not entirely sure how to reproduce it. Will update here if more info comes to light.

Tab memory starts climbing aggressively and Chrome tab freezes -- may be related to a circular dependency, but no errors are thrown.

[danielduan]

If this is still an issue, please reopen this.