FlyoutBase.ShowAttachedFlyout seems to break style :pointerover selector

[CenturySpine]

Hello all.

I'm trying to display a flyout on listbox item pointer over.

I have a style selector :pointerover which works fine as long as I don't show my attached flyout.

As soon as I call FlyoutBase.ShowAttachedFlyout, the :pointerover style disapears....

The xaml

  <ListBox.ItemTemplate>
  <DataTemplate>
	  <Border Name="MenuItemContainer"
		  Width="42" Height="42"
		  PointerEntered="ListBoxItemPointerEntered"
		  Classes.HasFlyout="{Binding Flyout, Converter={x:Static ObjectConverters.IsNotNull}}"
		  Classes.NoFlyout="{Binding Flyout, Converter={x:Static ObjectConverters.IsNull}}" >
		  <Border.Styles>
			  <Style Selector="Border.HasFlyout">
				  <Setter Property="FlyoutBase.AttachedFlyout">
					  <Setter.Value>
						  <Flyout Placement="RightEdgeAlignedTop" FlyoutPresenterClasses="ModuleFlyout" ShowMode="Transient">
							  <Border BoxShadow="0 0 30 0 #32323273"
									  CornerRadius="0, 8, 8, 0"
									  Background="{DynamicResource flyoutBackground}"
									  Padding="0" Margin="0">
								  <ContentControl Content="{Binding Flyout}" />
							  </Border>
						  </Flyout>
					  </Setter.Value>
				  </Setter>
			  </Style>
			  <Style Selector="Border.NoFlyout">
				  <Setter Property="FlyoutBase.AttachedFlyout" Value="{x:Null}"/>
			  </Style>
  
			  <Style Selector="Border#MenuItemContainer">
				  <Setter Property="BorderThickness" Value="5,0,0,0" />
				  <Setter Property="Background" Value="Transparent" />
				  <Setter Property="Padding" Value="-5,0,0,0" />
			  </Style>
			  
			  <Style Selector="Border#MenuItemContainer:pointerover">
				  <Setter Property="BorderBrush" Value="#20c5fc" />
				  <Setter Property="Background" Value="#0a516d" />
			  </Style>
		  </Border.Styles>
		  
			  <ContentControl Content="{Binding Icon}"/>
		  
	  </Border>
  
  </DataTemplate>
  </ListBox.ItemTemplate>

The code behind to manage & show the flyout

 private void ListBoxItemPointerEntered(object sender, PointerEventArgs e)
 {
     if (sender is Control ctl)
     {
         if (_currentCtl != null)
             return;

         var ctlFlyout = FlyoutBase.GetAttachedFlyout(ctl);

         // Some menu items does not have flyout
         if (ctlFlyout == null)
         {
             return;
         }
         
         System.Diagnostics.Debug.WriteLine("enter");
         _currentCtl = new FlyoutTrack(ctl, ctlFlyout, e.GetPosition(this));

         FlyoutBase.ShowAttachedFlyout(ctl); // <- break the :pointerover style which works fine as soon as this line disapears
     }
 }

The intended result is that I should have my pointer over visual hint/style and the opened flyout at the same time.

Am I doing something wrong ?

[CenturySpine]

Inspecting the visual tree before & after the flyout show, we clearly see that the popup overlay "steels" the pointover state

Before

After

[robloo]

Convention isn't to use :pointerover pseudoclass for this. Take a look at Button and SplitButton which uses :flyout-open

Avalonia/src/Avalonia.Controls/Button.cs

Line 38 in c925ca5

private const string pcFlyoutOpen = ":flyout-open";

That said you might have to write your own control to get what you want exactly. I'm not sure it's really standard what you are doing.