Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Text Field] Warning about missing id/name with the multiline prop #40859

Open
kcaddell opened this issue Jan 30, 2024 · 2 comments
Labels
component: text field This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it package: material-ui Specific to @mui/material

Comments

@kcaddell
Copy link

kcaddell commented Jan 30, 2024

Steps to reproduce

Link to live example: (required)

Steps:

  1. Navigate here - https://mui.com/material-ui/react-text-field/#multiline
  2. Open the debugger tools
  3. Open the console and view the issues tab
  4. image
  5. Open the 'A form field element has neither an id nor a name attribute.' and click the first 'violating node'
  6. Notice the 2nd textarea dom element with the missing id/name attributes
    image

Current behavior

Currently, MUI renders 2 textarea dom elements for each multiline textfield/input.
The 1st textarea component contains the id/name attribute as expected.
The 2nd textarea (hidden) component is missing id/name attributes which raises a browser issue/warning

Expected behavior

Both textarea dom components should contain unique id/name attributes

Context

Trying to keep the browser issues/warnings to a minimum.

Your environment

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

Search keywords: TextField multiline warning missing id

@kcaddell kcaddell added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 30, 2024
@danilo-leal danilo-leal changed the title MUI TextField with multiline - warning about missing id/name [material-ui][Text Field] Warning about missing id/name with the multiline prop Jan 30, 2024
@danilo-leal danilo-leal added component: text field This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material labels Jan 30, 2024
@FurkanKarakas
Copy link

I can confirm the same issue. Removing the multiline prop makes this error vanish.

@mj12albert
Copy link
Member

Similar to #38869

It's a harmless warning, the hidden textarea is required to provide the autosize features.

The warning doesn't affect a11y or actual UX as it's both visually hidden and aria-hidden

However we can't provide an artificial id or name to appease Chrome as it would break form submission behavior: #40128

@mj12albert mj12albert added status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it external dependency Blocked by external dependency, we can’t do anything about it and removed status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it labels Feb 20, 2024
@mj12albert mj12albert removed their assignment Feb 20, 2024
@mj12albert mj12albert removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it package: material-ui Specific to @mui/material
Projects
None yet
Development

No branches or pull requests

4 participants