[Tabs] Scrollable Tabs render an absolute-positioned div that blocks pointer events

[moritzdotcom]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/material-ui/react-tabs/#scrollable-tabs

Steps:

1. Use the Component with the variant "scrollable".
2. The first child inside the div with the class "MuiTabs-root" will be the following div:

<div class="MuiTabs-scrollableX MuiTabs-hideScrollbar" style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"></div>

Current behavior 😯

The above mentioned div gets rendered.

Expected behavior 🤔

If this div is rendered by mistake, it should not be rendered.
If this div has a purpose to be rendered, it should be considered to have pointer-events: none.

Context 🔦

When rendering multiple Tabs on the same page, if the page height get bigger than 9999px, the div:

<div class="MuiTabs-scrollableX MuiTabs-hideScrollbar" style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"></div>

rendered by the Tab on the bottom of the page starts to block pointer events for element on the top of the page.

In the following screenshot, the div from the card on the bottom of the page affects the card on the top of the page:

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Browser used:
Chrome

System:
OS: Linux 5.15 Debian GNU/Linux 10 (buster) 10 (buster)
Binaries:
Node: 16.13.2 - /usr/local/bin/node
Yarn: 1.22.15 - /usr/local/bin/yarn
npm: 8.1.2 - /usr/local/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
@emotion/react: ^11.10.5 => 11.10.5
@emotion/styled: ^11.10.5 => 11.10.5
@mui/base: 5.0.0-alpha.126
@mui/core-downloads-tracker: 5.12.1
@mui/material: ^5.11.1 => 5.12.1
@mui/private-theming: 5.12.0
@mui/styled-engine: 5.12.0
@mui/system: 5.12.1
@mui/types: 7.2.4
@mui/utils: 5.12.0
@types/react: 18.0.26 => 18.0.26
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 4.9.4 => 4.9.4

[mj12albert]

@moritzdotcom Thanks for reporting this ~

When rendering multiple Tabs on the same page, if the page height get bigger than 9999px, the div rendered by the Tab on the bottom of the page starts to block pointer events for element on the top of the page

Could you try to reproduce this in a sandbox? I don't think I fully understand the issue from the screenshot. You can fork this template: https://mui.com/r/issue-template-latest

[moritzdotcom]

Sure @mj12albert: https://codesandbox.io/s/happy-chatelet-9vit7c

As you can see in this sandbox, the first button is clickable and the second one is blocked by the Tabs Component that I positioned 9999px below the second button.

[mj12albert]

Thanks ~ I can reproduce this:

[mj12albert]

Workaround with CSS:

.MuiTabs-scrollableX.MuiTabs-hideScrollbar {
  pointer-events: none;
}