[Managed pointers] Pointer state can be stuck when visual tree changes

[Youssef1313]

Current behavior

Use this XAML:

    <StackPanel x:Name="sp">
        <StackPanel.Resources>
            <ResourceDictionary>
                <Style x:Key="MyButtonStyle" TargetType="Button">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid x:Name="MyGrid" Width="50" Height="50">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal">
                                                <VisualState.Setters>
                                                    <Setter Target="MyGrid.Background" Value="Red" />
                                                </VisualState.Setters>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <VisualState.Setters>
                                                    <Setter Target="MyGrid.Background" Value="Green" />
                                                </VisualState.Setters>
                                            </VisualState>
                                            <VisualState x:Name="PointerOver">
                                                <VisualState.Setters>
                                                    <Setter Target="MyGrid.Background" Value="Yellow" />
                                                </VisualState.Setters>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>

                    </Setter>
                </Style>
            </ResourceDictionary>
        </StackPanel.Resources>
        <Button Style="{StaticResource MyButtonStyle}" Click="Button_Click" x:Name="myBtn" />
    </StackPanel>

and code-behind:

        private async void Button_Click(object sender, RoutedEventArgs e)
        {
            var dialog = new ContentDialog();
            dialog.XamlRoot = sp.XamlRoot;
            dialog.CloseButtonText = "Close";
            await dialog.ShowAsync();
        }

If you click the button, and don't move the mouse, you'll find that it's stuck in PointerOver state, while it should have been in Normal state. The root cause is that we are missing PointerExited event in this case.

Expected behavior

In WinUI, they have a special internal XCP_POINTERUPDATE event. They request it by calling RequestReplayPreviousPointerUpdate, and then this event will raise the relevant events, if needed.

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

No response

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

No response

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[Youssef1313]

The ContentDialog test change done in #17633 is caused by this issue. It may be best to revert the test change when this issue is resolved.

[dr1rrb]

The ContentDialog test change done in #17633 is caused by this issue. It may be best to revert the test change when this issue is resolved.

Hummm for me it was only the focus of the button that has change, when the Dialog is being opened: and then when we have tapped on the overlay:

[Youssef1313]

I think that's more the "hover" state, which happens because of the missing pointer exit event. The repro in the issue probably makes it more clear?

In the first screenshot, the button is in PointerOver visual state.