[Tabs] Sometimes gives an error of "null is not an object" if it's scrollable

[gaurikolhe]

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior

I get TypeError: null is not an object (evaluating 'nodeRef.current.offsetHeight'). when I use Tabs component (variant = "scrollable") on my iPad. It doesn't happen consistently. On debug, I got to know it's coming from Tabs/ScrollbarSize.js

Expected Behavior 🤔

Tabs should have work without an error.

Steps to Reproduce 🕹

Steps:

This doesn't happen consistently so I would leave the page idle (I don't have an exact time period from the bug filer), and then rotate the device (iPad) from portrait to landscape.
https://codesandbox.io/s/dazzling-browser-3hs5d?file=/src/Hello.js&resolutionWidth=1024&resolutionHeight=765
this is what I was able to do, but it takes a period of inactivity in my application, so I'm not sure that you'll have any luck seeing it. But at least you can see the architecture behind it. Thank you.

Context 🔦

Your Environment 🌎

Material-UI - 4.11.4
React - 17.0.2
Typescript - 4.2.4

[eps1lon]

codesandbox.io/s/dazzling-browser-3hs5d?file=/src/Hello.js&resolutionWidth=1024&resolutionHeight=765
this is what I was able to do, but it takes a period of inactivity in my application,

Does this reproduce with the codesandbox open in your tablet or having just the app open?

[gaurikolhe]

@eps1lon I tried to reproduce it with codesandbox open, but I had no success. I have a sentry set up in my project so I got few sentry error messages for the same. It doesn't happen consistently in my project either.

[eps1lon]

I added this issue to our backlog because it hints at some false assumptions we have with this particular line of code.

[shishirtiwari23]

@eps1lon I faced a similar issue

[igorschlum]

We have also this issue:

Exception

TypeError: null is not an object (evaluating 'a.current.offsetHeight') at setMeasurements

[mnajdova]

Interesting, this look similar to #33276 which was fixed in #33277. Could you check if this still happens in the latest version (5.8.7)?

[mnajdova]

Please create an updated codesandbox with the latest version of @mui/material. It's likely that the issue is fixed already.

This is a sandbox with a similar broken behavior: https://codesandbox.io/s/awesome-moore-y9zl1o?file=/src/app.js

This is a sandbox with the latest version where the behavior is fixed: https://codesandbox.io/s/cranky-neumann-s81uyd?file=/src/app.js

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[mooflu]

We are seeing this sentry error as well (using 5.11.5). A check in here https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Tabs/ScrollbarSize.js#L29 similar to https://github.com/mui/material-ui/blame/master/packages/mui-material/src/Tabs/Tabs.js#L573 would prevent error I think.

All sentry errors were on mobile (iOS and Android), though personally I've not been able to repro.

[rkdrnf]

I think this should be reopened, occurring in 5.11.4 too. as @mooflu mentioned, it is happening on the mobile platform only in our case too.