mui / mui/material-ui

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

Open
#38,516 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: divider scope: tabs type: enhancement
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox example in Demo.tsx and reproduce the warnings in Chrome DevTools using the Divider and Tabs components. Trace the rendered props from Tabs to Divider, then verify that the example produces no console warnings while preserving the expected tab and divider behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.