Skip to content

use formDisabledCallback to support <fieldset> disabled attribute #5049

Open
@datvm

Description

@datvm
Contributor

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

Activity

asyncLiz

asyncLiz commented on Oct 3, 2023

@asyncLiz
Collaborator

We need to add formDisabledCallback() to our elements, since <fieldset> can disable them

formDisabledCallback(disabled: boolean) {
  this.disabled = disabled;
}

This would be a good community PR, want to take a stab at it?

changed the title [-]Button and Input components do not honor <fieldset> disabled attribute[/-] [+]use formDisabledCallback to support <fieldset> disabled attribute[/+] on Oct 3, 2023
datvm

datvm commented on Oct 3, 2023

@datvm
ContributorAuthor

Sure I can do that :)

self-assigned this
on Oct 3, 2023
asyncLiz

asyncLiz commented on Dec 15, 2023

@asyncLiz
Collaborator

This is fixed now in 1.1 :)

mrpachara

mrpachara commented on Feb 11, 2024

@mrpachara

I not sure this is just a workaround or completely fix. The behavior is wrong due to, #5053 (comment). The component should not set disabled to itself. Moreover, when <fieldset> is changed back to enabled state, the <text-field> is not changed back to enabled.

asyncLiz

asyncLiz commented on Feb 14, 2024

@asyncLiz
Collaborator

Interesting! After investigating, I believe the problem is that setting our own disabled attributes changes the underlying disabled state of the FACE.

Instead, we need to handle an internal disabled state and a client-facing disabled attribute state.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Participants

    @datvm@mrpachara@asyncLiz

    Issue actions

      use formDisabledCallback to support <fieldset> disabled attribute · Issue #5049 · material-components/material-web