CommandBarFlyout not closing on ClickEvent

[jnkiepert]

First of all I want to say that I enjoy working with this libary a lot. So much just works out of the box!

What I am trying to replicate is the ItemsRepeater layout behaviour with ListView and want to show a CommandBarFlyout when clicking on a ListViewItem.

So far I got everything I need except the Flyout will stay open until either a KeyEvent is handled (e.x. ESC),or the application state is otherwise changed (minimzed, ALT+TAB etc.). Alternatively the Flyout will close on click but ONLY if any of its AppBarButton was clicked beforehand.

In Page.xaml

<ui:Page.Resources>
    <ui:CommandBarFlyout
            Placement="RightEdgeAlignedTop"
            x:Key="ItemCommandBarFlyout"
            >
            <ui:AppBarButton Label="Edit" Icon="Edit" ToolTipService.ToolTip="Edit" Click="OnElementClicked" />
            <ui:AppBarButton Label="Delete" Icon="Delete" ToolTipService.ToolTip="Delete" Click="OnElementClicked"/>
        </ui:CommandBarFlyout>
</ui:Page.Resources>
[...]
<ui:ListView x:Name="ConnectionsRepeater"
            ItemTemplateSelector="{StaticResource ConnectionTypeTemplateSelector}"
            Margin="0,0,12,0" HorizontalAlignment="Stretch"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ui:ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Grid.IsSharedSizeScope="True"/>
                </ItemsPanelTemplate>
            </ui:ListView.ItemsPanel>
        </ui:ListView>

The ListViewItems are boxed inside a grid (this is necessary for replicationg the ItemRepeater UniformGridLayout).

In the codebehind I set the ItemSelected event handler

private CommandBarFlyout ItemCommandBarFlyout;

public Page()
{
     InitializeComponent();
     ItemCommandBarFlyout = (CommandBarFlyout)Resources[nameof(ItemCommandBarFlyout)];
     ConnectionsRepeater.AddHandler(
                ModernWpf.Controls.ListViewItem.SelectedEvent, 
                new RoutedEventHandler(ConnectionsRepeater_ItemClick), true);
}

while furthermore handling the FlyOut like this.

private void ShowMenu(bool isTransient, FrameworkElement position = null)
 {

    ItemCommandBarFlyout.ShowMode = FlyoutShowMode.Transient;
    var selectedElement = position ?? (FrameworkElement)ConnectionsRepeater.ItemContainerGenerator.ContainerFromIndex(ConnectionsRepeater.SelectedIndex);
     ItemCommandBarFlyout.ShowAt(selectedElement);
}

private void ConnectionsRepeater_ItemClick(object sender, RoutedEventArgs e)
{
     ShowMenu((sender as ModernWpf.Controls.ListView).IsMouseOver, (FrameworkElement)e.OriginalSource);
}

The code is just a slightly altered versions of the code in the ModernWpf.ExampleApp in which the CommandBarFlyout is used with a button and an embedded image. I just don't get the same behaviour for the flyout.

This is my expected behaviour:

• First click on a ListViewItem opens the Flyout
• Clicking a menu item inside the Flyout does not close the Flyout (this works)
• A second click on the same item should close the flyout (does not work for me)
• Clicking away on the UI or a different ListViewItem should close an opened flyout but not open a new one (does not work for me). This is the demonstrated behaviour in the examples

Any help to use the CommandBarFlyout with the ListView would be appreciated.

[Kinnara]

A repro project would be very helpful.