Snackbar - TypeError: Cannot read property 'scrollTop' of undefined

[sathishk2030]

@material-ui/core: 4.1.2

Re-produce: use react material live site & CodeSandbox demo.

[joshwooding]

Confirmed reproduction: https://codesandbox.io/embed/y6lzd

Opened success snackbar and got the type error.

[klein-h]

Confirmed on the material-ui website too.

[oliviertassinari]

Should we uniquely fix the demo? Do we have a better alternative in the core?

[klein-h]

When the demo will be fix, i think the component will be usable.

[oliviertassinari]

@klein-h The demo fix is simple, it's about adding React.forwardRef.

[eps1lon]

Should we uniquely fix the demo?

I'm fixing the demo and add a prop-type warning. The child of Snackbar needs to be able to hold a ref since we switched to @material-ui/react-transition-group. We didn't have a test for custom children which is why this breakage slipped through.

[eps1lon]

#16283 was a breaking for Snackbars. We need to revert.

[oliviertassinari]

Would a fallback logic on findDOMNode work? Is it possible to detect if the provided element doesn't accept a ref?

[eps1lon]

Can we detect if the provided element doesn't accept a ref?

Unfortunately not. We can only look at the direct element and in cases of React.memo we don't know if a ref can be held because it could wrap a function component.

Would a fallback logic on findDOMNode work?

We could convert Snackbar to a class component and then fallback to findDOMNode(this). But it would still create warnings that we attached a ref to function components. This is a pretty big drawback because that particular warning is an actual error for every other material-ui component. If we communicate that it can be ignored for Snackbars it might be ignored in other cases.

[klein-h]

Still have the error on the demo page btw.