[TextField] Passing a React.Node to the helperText prop causes validateDOMNesting errors in the console
Nobody has claimed this yet.
- 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
Current behavior 😯
Passing a React.Node to the helperText prop of TextField (<TextField helperText={<h1>help</h1>} /> for example) causes the following warning to appear in the console:
Warning: validateDOMNesting(...): <h1> cannot appear as a descendant of <p>.
Demo: https://codesandbox.io/s/formpropstextfields-material-demo-forked-vno506?file=/demo.tsx
Expected behavior 🤔
The type of TextFieldProps['helperText'] is React.Node, so passing a valid React.Node should not cause a warning in the console.
Steps to reproduce 🕹
Steps:
- Add
<TextField helperText={<h1>help</h1>} />to a page - Open the developer console and reload the page
Context 🔦
A project I am a developer on requires us to dynamically create an error message for some inputs, which we do by parsing a an html string using a configuration object and producing a React.Node of the error message.
Your environment 🌎
`npx @mui/envinfo`
Testing with Safari and Chrom
System:
OS: macOS 12.2.1
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
Yarn: 1.22.10 - ~/Developer/digital-wealth-core/node_modules/.bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
Browsers:
Chrome: 100.0.4896.75
Edge: Not Found
Firefox: 98.0.1
Safari: 15.3
npmPackages:
@emotion/react: ^11.7.1 => 11.7.1
@emotion/styled: ^11.6.0 => 11.6.0
@mui/base: 5.0.0-alpha.72
@mui/icons-material: ^5.5.1 => 5.5.1
@mui/lab: ^5.0.0-alpha.73 => 5.0.0-alpha.73
@mui/material: ^5.5.1 => 5.5.1
@mui/private-theming: 5.4.4
@mui/styled-engine: 5.4.4
@mui/system: 5.5.1
@mui/types: 7.1.3
@mui/utils: ^5.4.4 => 5.4.4
@types/react: 17.0.3 => 17.0.3
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
typescript: ^4.6.3 => 4.6.3
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the TextField helperText behavior and reproduce the warning using the linked CodeSandbox or the provided <TextField helperText={
help
} /> example. Trace how helperText is rendered and add coverage showing that valid React.Node content does not produce a validateDOMNesting warning.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