search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.96k stars 32.28k forks source link

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

Open bpc1985 opened 1 year ago

bpc1985 commented 1 year ago

Duplicates

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 commented 1 year ago

@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[bot] commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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.