NavigationView - CanDrag causes all MenuItem's to remain highlighted once pressed

[Parth]

Describe the bug

I'm using a Hierarchical Navigation View as described here.

Works as expected, but when I add the CanDrag property to my DataTemplate, I experience what I believe is a rendering bug:

Xaml under normal circumstances:

<Page x:Class="lockbook.FileExplorer"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:lockbook"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="NavigationViewMenuItem"
                      x:DataType="local:File">
            <muxc:NavigationViewItem Content="{x:Bind Name}"
                                     Tag="{x:Bind Id}"
                                     IsExpanded="{x:Bind Expanded}"
                                     MenuItemsSource="{x:Bind Children}" />
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <muxc:NavigationView x:Name="navview"
                             MenuItemsSource="{x:Bind Categories, Mode=OneWay}"
                             MenuItemTemplate="{StaticResource NavigationViewMenuItem}"
                             ItemInvoked="{x:Bind OnItemInvoked}"
                             Expanding="OnItemExpanding"
                             IsBackButtonVisible="Collapsed"
                             Collapsed="OnItemCollapsed"
                             PaneDisplayMode="Left">
            <StackPanel Margin="10,10,0,0">
                <TextBlock Margin="0,10,0,0"
                           x:Name="ExpandingItemLabel"
                           Text="Last Expanding: N/A" />
                <TextBlock x:Name="CollapsedItemLabel"
                           Text="Last Collapsed: N/A" />
            </StackPanel>
        </muxc:NavigationView>
    </Grid>
</Page>

Which produces:

The Bug:

Xaml when experiencing the bug:

<Page x:Class="lockbook.FileExplorer"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:lockbook"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="NavigationViewMenuItem"
                      x:DataType="local:File">
            <muxc:NavigationViewItem Content="{x:Bind Name}"
                                     Tag="{x:Bind Id}"
                                     IsExpanded="{x:Bind Expanded}"
                                     CanDrag="True" <---------
                                     MenuItemsSource="{x:Bind Children}" />
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <muxc:NavigationView x:Name="navview"
                             MenuItemsSource="{x:Bind Categories, Mode=OneWay}"
                             MenuItemTemplate="{StaticResource NavigationViewMenuItem}"
                             ItemInvoked="{x:Bind OnItemInvoked}"
                             Expanding="OnItemExpanding"
                             IsBackButtonVisible="Collapsed"
                             Collapsed="OnItemCollapsed"
                             PaneDisplayMode="Left">
            <StackPanel Margin="10,10,0,0">
                <TextBlock Margin="0,10,0,0"
                           x:Name="ExpandingItemLabel"
                           Text="Last Expanding: N/A" />
                <TextBlock x:Name="CollapsedItemLabel"
                           Text="Last Collapsed: N/A" />
            </StackPanel>
        </muxc:NavigationView>
    </Grid>
</Page>

Which produces the following when you click on MenuItems:

Strangely (and perhaps something that's useful) if I get rid of CanDrag and allow a hot reload, it doesn't go away until I click on each item. But then it behaves normally once again.

Version Info

NuGet package version:

[Microsoft.UI.Xaml 2.4.0] (and 2.4.3)

Windows app type:

UWP	Win32
Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)	Yes
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

[Parth]

This seems to happen even when dragging is completely disabled. If you try to click on a NavigationItem and move away without unclicking the item remains highlighted.

[Parth]

Able to completely suppress the issue by adding these:

        <SolidColorBrush x:Key="NavigationViewItemBackgroundPointerOver"
                         Color="Transparent" />
        <SolidColorBrush x:Key="NavigationViewItemBackgroundPressed"
                         Color="Transparent" />
        <SolidColorBrush x:Key="NavigationViewItemBackgroundSelectedPressed"
                         Color="Transparent" />

As a very short term workaround.

[StephenLPeters]

@Parth we made a few fixes in this space, can you try again with the latest 2.5 prerlease and report back if it still reproduces?

[Parth]

This seems to be fixed in 2.5 🎉