fix: added formDisabledCallback for formAssociated elements

[datvm]

Controls should be disabled when a parent fieldset has disabled=true. Fix #5049

[datvm]

Right now Radio and Slider are disabled inside disabled fieldset but their UIs are not updated. I found out their CSS is using [disabled]. It should be :disabled but I do not know how to edit them.

Also beside using a variable to track formDisabledCallback, we can also use this.matches(":disabled") instead.

[asyncLiz]

I don't think we need this property. You should be able to set this.disabled = formDisabled, which should also handle updating the UI correctly. Can you try that?

You also won't need this.requestUpdate() when setting this.disabled, since it's a @property

[datvm]

I planned to do that but it would be a wrong behavior. If you set disabled of the control at formDisabledCallback, the control itself would be disabled.

So in case you have a fieldset with two controls, one is disabled (by itself) and one is not, when the fieldset disabled is lifted, one control should still be disabled:

<fieldset>
   <input disabled /> <!-- This should stay disabled if the fieldset is disabled and then enabled -->
   <button></button>
</fieldset>

Also standard elements (like input) still has its disabled property being false even when it's disabled by its parent. That's why I used an extra variable to keep track of the state. An alternative should be using .matches(":disabled").

[asyncLiz]

Gotcha, thanks for the explanation!

[asyncLiz]

FYI on this, we're working on mixin behaviors for shared functionality, including form associated mixins.

We may hold off on this PR for a bit while that's in development

[datvm]

@asyncLiz Yes no problem, when making this change I also thought this should be a common behavior for all controls that are formAssociated and should inherit from a common ancestor/mixin. I will close this PR for now then.