material-components / material-components/material-web

use formDisabledCallback to support <fieldset> disabled attribute

Open
#5,049 5 comments 0 reactions 1 assignee View on GitHub

@asyncliz is already working on this.

Since Oct 3, 2023.

Dominant language
SCSS
Stars
11.3k
Forks
1.1k
Avg merge
20h 28m
Merged PRs (30d)
13

Description

What is affected?

Component

Description

See: https://jsfiddle.net/datvm/zdpeqc5j/1/

image

For standard components, when an acestor <fieldset> has [disabled=true], they are disabled as well. I think this behavior is not discussed yet so it's probably not a bug? Would you consider adding this feature?

Note: the screenshot above misses <md-select>.

Reproduction

https://jsfiddle.net/datvm/zdpeqc5j/1/

<fieldset disabled>
    <p>
        <md-filled-button>A Material 3 Button</md-filled-button>
        <button>Standard button</button>
    </p>
    
    <p>
        <md-outlined-text-field></md-outlined-text-field>
        <input value="Standard input" />
    </p>
    
    <p>
        <md-checkbox></md-checkbox>
        <md-switch></md-switch>
        <input type="checkbox" value="Standard input" />
    </p>
    
    <p>
        <md-radio></md-radio>
        <input type="radio" value="Standard input" />
    </p>
    
    <p>
        <md-slider></md-slider>
        <input type="range" />
    </p>
    
</fieldset>
Workaround

You have to manually set disabled to each component in the fieldset.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0.0

Browser/OS/Node environment

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.