Button with OutlinedButtonStyle or MaterialOutlinedButtonStyle style stay selected if we execute a task

SamuelPelletierEvraire commented 1 year ago

Current behavior

This problem occurs when a button containing the OutlinedButtonStyle style executes a task requiring a delay before execution, for example Task.Delay(2000).

Expected behavior

The button don't stay selected.

How to reproduce it (as minimally and precisely as possible)

UnoIssue.zip

Workaround

NA

Works on UWP/WinUI

Yes

Environment

Other

NuGet package version(s)

            <PackageReference Include="Chinook.DynamicMvvm" Version="1.1.5" />
    <PackageReference Include="Uno.Dsp.Tasks" Version="1.0.1" />
    <PackageReference Include="Uno.WinUI" Version="4.8.24" />
    <PackageReference Include="Uno.Resizetizer" Version="1.0.2" />
    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
    <PackageReference Include="Uno.Extensions.Configuration" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Http" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Http.Refit" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Logging.WinUI" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Serialization.Http" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Serialization.Refit" Version="2.3.6" />
    <PackageReference Include="Uno.Material.WinUI" Version="2.5.3" />
    <PackageReference Include="Uno.Toolkit.WinUI.Material" Version="2.5.5" />
    <PackageReference Include="Uno.Toolkit.WinUI" Version="2.5.5" />
    <PackageReference Include="Uno.Extensions.Authentication.WinUI" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Hosting.WinUI" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Localization.WinUI" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Navigation.Toolkit.WinUI" Version="2.3.6" />
    <PackageReference Include="Uno.Extensions.Navigation.WinUI" Version="2.3.6" />
    <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="6.0.0" />

Affected platforms

Android, iOS, Windows

IDE

Visual Studio 2022

IDE version

17.5.3

Relevant plugins

No response

Anything else we need to know?

No response

kazo0 commented 1 year ago

@LeKillerDuTurffu Could you provide a visual of the issue because I can't seem to reproduce this

Android:

android-button-command

Windows:

win-button-command

kazo0 commented 1 year ago

Oh I see the issues, sorry, the button is staying in the selected state after re-enabling

kazo0 commented 1 year ago

Ok so I see what's happening. It's not actually staying "selected", the reason is that the button that is clicked is in the PointerFocused visual state when the button is re-enabled. As per the Material 3 Design Guidelines, the Focused state should look like it does in the sample app:

https://m3.material.io/components/buttons/specs#3e0f4ace-3ed5-4d4e-89ae-3743e76c62f4

On the Windows app, if you were to Tab through the controls on the page, you'd see the same effect once the Material button was tabbed into focus. It looks like we are actually doing this for both the PointerFocused and the Focused visual states.

If we were to create a custom style in the app like this:

<Style x:Key="MyButtonStyle"
        TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="Root"
                        Background="Red">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="Focused">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="Green" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerFocused">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="Green" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

We'd also see it occur for that non-material style:

pointerfocused

@Xiaoy312 @agneszitte - this looks to be because we are still in the PointerFocused visual state, which makes sense but does look a little odd here. Seems to just be the normal Windows behavior, though. Anything we can do here? Besides eventually allowing for Lightweight Styling and setting the eventual PointerFocusedBackgroundBrush to Transparent?

kazo0 commented 1 year ago

@Xiaoy312 / @agneszitte - anything we can do here? Does removing the PointerFocused VisualState in the template make sense or no?

unoplatform / uno