Cannot read property 'scrollTop' of null

[stunaz]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

when using StaticDatePicker along with a transition component like Fade... I get the error Cannot read property 'scrollTop' of null

Expected Behavior 🤔

No errors.

Steps to Reproduce 🕹

https://codesandbox.io/s/intelligent-chebyshev-gkke3?file=/src/App.jsx:441-448

Context 🔦

Your Environment 🌎

Tech	Version
@material-ui/core	v5 alpha 5
@material-ui/pickers	v4 alpha 11
React	latest
Browser	any
TypeScript	latest
etc.

[oliviertassinari]

@stunaz Thanks for opening an issue. The issue is that the date picker components don't implement the forward ref pattern correctly. We keep track of the problem in #1604. For instance, in https://codesandbox.io/s/elegant-margulis-shdj8?file=/src/App.jsx, the ref should return the root element. But nothing happens. In some other components, the returned ref isn't the root element but some arbitrary nested element which would lead to similar issues.

Workaround: add a wrapping div.

[oliviertassinari]

Also, please mind that, normally, we would get a warning https://codesandbox.io/s/dazzling-tereshkova-um6wm?file=/src/App.jsx. The problem is that StaticDatePicker has a React.forwardRef but does nothing with the ref.
We should use test/describeConformance.js as we move the picker into the main repository infrastructure, to put a constraint that will avoid regressions and assert the correct behavior.