[material-ui][Tabs] Scrollable variant fails test when clicking the tab (error reading 'offsetHeight')

[nicholeuf]

Steps to reproduce

Update Jun 7, 2024: There was a comment on the PR questioning whether the original live example isn't depending on #36485. Therefore, a new live example was created and linked below, which is connected to https://github.com/nicholeuf/mui-test-fixture-41388.

Original link to live example: codesandbox.io

This only seems to happen under test. See the test scenario in the link above.

Current behavior

The test fails with the following error:

    TypeError: Cannot read properties of null (reading 'offsetHeight')

      at setMeasurements (node_modules/.pnpm/@mui+material@5.15.12_@emotion+react@11.11.4_@emotion+styled@11.11.0_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/Tabs/ScrollbarSize.js:40:47)

It fails at:

material-ui/packages/mui-material/src/Tabs/ScrollbarSize.js

Lines 25 to 27 in 2ef685d

	const setMeasurements = () => {
	scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
	};

Expected behavior

The test passes.

Context

I would like to test my application with a similar code setup.

Your environment

npx @mui/envinfo

From live example:

 System:
    OS: Linux 6.1 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 20.12.1 - /home/codespace/nvm/current/bin/node
    npm: 10.5.0 - /home/codespace/nvm/current/bin/npm
    pnpm: 8.15.6 - /home/codespace/nvm/current/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/material: ^5.15.19 => 5.15.19 
    @mui/material-nextjs: ^5.15.11 => 5.15.11 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.4.5 => 5.4.5 

From original project where error was discovered:

System:
    OS: macOS 14.3.1
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 122.0.6261.111
    Edge: Not Found
    Safari: 17.3.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.38
    @mui/core-downloads-tracker:  5.15.12
    @mui/icons-material: ^5.15.12 => 5.15.12
    @mui/material: ^5.15.12 => 5.15.12
    @mui/material-nextjs: ^5.15.11 => 5.15.11
    @mui/private-theming:  5.15.12
    @mui/styled-engine:  5.15.11
    @mui/system:  5.15.12
    @mui/types:  7.2.13
    @mui/utils:  5.15.12
    @types/react: ^18.2.63 => 18.2.63
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.3.3 => 5.3.3

Search keywords: tabs scrollable test

[joacub]

Same here on Next.js with ppr activated (https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering).

[ZeeshanTamboli]

Looks like a bug.

[supidupicoder2]

Same happens for me but without tests, just when trying to navigate to a specific view.

EDIT: What fixed it for me is using react and react-dom version 18.2.0 instead of 0.0.0-experimental-fb10a2c66-20240228

[joacub]

will be this fixed? can not update anymore nextjs , this is a simple check if the reference is undefined .....

[thovden]

This fails for me using the latest React 19 RC and React Compiler.

[eb-revel]

Also started getting this issue when rendering Tabs with React 19 / React Compiler. Monkey-patching setMeasurements inside @mui/material/Tabs/ScrollbarSize.js to the version below helps unblock development, hope this gets patched as React Compiler is a game changer for our app's performance.

  const setMeasurements = () => {
    if (nodeRef.current && scrollbarHeight.current) {
      scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
    }
  };

In case anyone else is blocked by this try https://www.npmjs.com/package/patch-package until this gets fixed

[ZeeshanTamboli]

Feel free to create a PR with a reproduction and a test.