[Divider][Tabs] Using divider with tab causes 4 console warnings in Chrome DevTools

[bpc1985]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to reproduce:
https://codesandbox.io/s/ecstatic-fast-rhkzvn?file=/Demo.tsx

Current behavior 😯

When trying to add Divider to Tab component

For example:

      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
      >
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Divider />
        <Tab label="Item Three" {...a11yProps(2)} />
        <Tab label="Item Four" {...a11yProps(3)} />
        <Divider sx={{ borderBottomWidth: "thick" }} />
        <Tab label="Item Five" {...a11yProps(4)} />
        <Tab label="Item Six" {...a11yProps(5)} />
        <Tab label="Item Seven" {...a11yProps(6)} />
      </Tabs>

it causes a lot of warnings in devtools

Warning: React does not recognize the `fullWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fullwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at hr
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Divider (https://rhkzvn.csb.app/node_modules/@mui/material/Divider/Divider.js:120:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Tabs (https://rhkzvn.csb.app/node_modules/@mui/material/Tabs/Tabs.js:194:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Box (https://rhkzvn.csb.app/node_modules/@mui/system/esm/createBox.js:28:40)
    at VerticalTabs (https://rhkzvn.csb.app/Demo.tsx:51:35)
    at StyledEngineProvider (https://rhkzvn.csb.app/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:21:23)
    
Warning: Received `false` for a non-boolean attribute `indicator`.

If you want to write it to the DOM, pass a string instead: indicator="false" or indicator={value.toString()}.

If you used to conditionally omit it with indicator={condition && value}, pass indicator={condition ? value : undefined} instead.
    at hr
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Divider (https://rhkzvn.csb.app/node_modules/@mui/material/Divider/Divider.js:120:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Tabs (https://rhkzvn.csb.app/node_modules/@mui/material/Tabs/Tabs.js:194:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Box (https://rhkzvn.csb.app/node_modules/@mui/system/esm/createBox.js:28:40)
    at VerticalTabs (https://rhkzvn.csb.app/Demo.tsx:51:35)
    at StyledEngineProvider (https://rhkzvn.csb.app/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:21:23)
    
Warning: React does not recognize the `selectionFollowsFocus` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `selectionfollowsfocus` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at hr
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Divider (https://rhkzvn.csb.app/node_modules/@mui/material/Divider/Divider.js:120:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Tabs (https://rhkzvn.csb.app/node_modules/@mui/material/Tabs/Tabs.js:194:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Box (https://rhkzvn.csb.app/node_modules/@mui/system/esm/createBox.js:28:40)
    at VerticalTabs (https://rhkzvn.csb.app/Demo.tsx:51:35)
    at StyledEngineProvider (https://rhkzvn.csb.app/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:21:23)
    
Warning: React does not recognize the `textColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `textcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at hr
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Divider (https://rhkzvn.csb.app/node_modules/@mui/material/Divider/Divider.js:120:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Tabs (https://rhkzvn.csb.app/node_modules/@mui/material/Tabs/Tabs.js:194:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Box (https://rhkzvn.csb.app/node_modules/@mui/system/esm/createBox.js:28:40)
    at VerticalTabs (https://rhkzvn.csb.app/Demo.tsx:51:35)
    at StyledEngineProvider (https://rhkzvn.csb.app/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:21:23)
​

Expected behavior 🤔

It should not show any warnings

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

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

[ZeeshanTamboli]

@bpc1985 What is your purpose for having a Divider element there? The Material UI Tabs component is meant to have only Material UI Tab children inside.

[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.

[bpc1985]

@bpc1985 What is your purpose for having a Divider element there? The Material UI Tabs component is meant to have only Material UI Tab children inside.

Sorry, I dont see it for a long time
Using <Divider /> in <Tabs> to add some line divider between some tab

[ZeeshanTamboli]

Alright, I believe it's a good idea to support it. The warnings occur because the props are passed to the DOM due to Tabs using React.cloneElement internally. This can be resolved by either using the React Context API or transitioning to the Base UI Tabs hook.