fix: FluentButton does not get enabled when its parent fieldset is not disabled any more

[vnbaaij]

🐛 Bug Report

This is a bug posted on the fluentui-blazor repo but is directly caused by a bug in fluent-button

When a FluentButton is inside a fieldset, all of them get disabled when that fieldset is disabled which is correct. However when the fieldset is no longer disabled, the FluentButtons are still disabled.

💻 Repro or Code Sample

@page "/test"

<fieldset disabled="@(working)">
    <p>
        <FluentButton OnClick="WorkAsync">
            Work
        </FluentButton>

        <FluentButton>
            Button for Testing
        </FluentButton>

        <button>Button for Testing</button>
    </p>
</fieldset>

<p>
    <button disabled="@(working)">Testing Button</button>
</p>

@code {
    bool working;

    async Task WorkAsync()
    {
        working = true;
        StateHasChanged();

        await Task.Delay(1000);
        working = false;
    }
}

🤔 Expected Behavior

The FluentButtons should be enabled once the fieldset is not disabled anymore.

😯 Current Behavior

The FluentButtons are still disabled. The standard buttons are for confirming that the code works as intended and they get enabled.

💁 Possible Solution

Unknown, I tried adding extra StateHasChanged called too but it doesn't work.

🔦 Context

🌍 Your Environment

• OS & Device: Windows 11 Pro
• Browser Microsoft Edge
• .NET and Fluent UI library v3 and web-components v2.5.16

[chrisdholt]

I think the issue here is actually the buttons all sprouting the disabled attribute in the first place - @nicholasrice may have thoughts here as well. Needs investigation.

[datvm]

Material Components have similar issues and the component should NOT add disabled attribute or setting the disabled itself. Instead formDisabledCallback should be used.

See my comment on https://github.com/material-components/material-web/pull/5053 and https://stackoverflow.com/questions/77225218/how-do-i-check-if-a-form-element-input-or-button-etc-is-disabled-by-itself-or

[Mike-E-angelo]

I just ran into this. This is surprising behavior and should at least be enabled/disabled with a setting provided by your API.

In my case the fieldset is in a parent component and its state is not easily accessible. Using the workaround provided here is a hassle and is not a good resulting experience of your product.

Thank you for your consideration in getting this resolved.

[chrisdholt]

I just ran into this. This is surprising behavior and should at least be enabled/disabled with a setting provided by your API.

In my case the fieldset is in a parent component and its state is not easily accessible. Using the workaround provided here is a hassle and is not a good resulting experience of your product.

Thank you for your consideration in getting this resolved.

Thanks, the dependency on FAST Foundation has been dropped in Fluent UI for the next version and I believe this will have a solution for the vNext (PR linked, code in Beta). I'm not sure it's easily back portable given the breaking nature, but it may be possible in Fluent as these are "somewhat" internals. https://github.com/microsoft/fluentui/pull/30999