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][Form Control] Native HTML attribute is not supported #38932

Open
2 tasks done
mogamogua opened this issue Sep 12, 2023 · 4 comments
Open
2 tasks done

[material-ui][Form Control] Native HTML attribute is not supported #38932

mogamogua opened this issue Sep 12, 2023 · 4 comments
Assignees
Labels
component: FormControl The React component enhancement This is not a bug, nor a new feature package: material-ui Specific to @mui/material

Comments

@mogamogua
Copy link

mogamogua commented Sep 12, 2023

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/38932-formcontrol-fieldset-33jmdg

Steps:

  1. change FormControl's component into 'fieldset'
  2. add 'disabled'
  3. html attribute 'disabled' is not applied.

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

I want to make FormFieldset component which use FormControl component,
and when disabled prop is true, also want to set fieldset's attribute disabled to true.

I don't know is it intended or not, HTML attribute is not changed.
do I alternatively use aria-disabled attribute?

image

fieldset spec: https://html.spec.whatwg.org/multipage/form-elements.html#attr-fieldset-disabled

Your environment 🌎

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
@mogamogua mogamogua added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 12, 2023
@zannager zannager added the component: FormControl The React component label Sep 12, 2023
@danilo-leal danilo-leal changed the title [formControl] native HTML attribute is not supported [material-ui][Form Control] Native HTML attribute is not supported Sep 12, 2023
@danilo-leal danilo-leal added the package: material-ui Specific to @mui/material label Sep 12, 2023
@mj12albert
Copy link
Member

@mogamogua Thanks for reporting this ~ I've updated the sandbox link

It could make sense to handle fieldset as a special case here, though it could be a breaking change.

Are you also relying on this for styling? I think we can add disabled to the utility classes for this

@mj12albert mj12albert added enhancement This is not a bug, nor a new feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 19, 2023
@mogamogua
Copy link
Author

I don't need it for styling. just wanted to make screen readers can notice disabled fieldset.

@mogamogua
Copy link
Author

I found that all the elements inside the disabled fieldset should be disabled. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset). (If I set disabled to fieldset, all the input inside changed into disabled)

This can be useful in case of using FormControl inside the FormControl (ex. TextField)
In demo, If you manually set fieldset's disabled attribute on DOM element(because FormControl already has disabled prop, we cannot set html attribute), You can find TextField changed into disabled (although some style is not same with disabled TextField).

I think fieldset element is also considered as form element in mui, so we can support valid html markup.

  • All the input element(checkbox, radio, TextField ...) should be disabled, and has disabled style if parent fieldset set to disabled
  • current Select is not disabled since this is not made by native select

I'm making a design system using MUI, thank you for making a great product and I hope my opinion helps you improve the product. If there is any other way (which can affect the FormControl context used within FormControl) to solve the problems I experience creating FormFieldset I would be so grateful if you could let me know.

@mj12albert
Copy link
Member

@mogamogua I agree it makes sense for FormControl to have this behavior if the underlying element is a fieldset, this is something we could add in v6, I've added an item to the related issue to track this ~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: FormControl The React component enhancement This is not a bug, nor a new feature package: material-ui Specific to @mui/material
Projects
Status: Backlog
Development

No branches or pull requests

6 participants