Host the POS-chooser and option-picker dropdowns in flyouts, not free popups

Both collapsed dropdowns previously opened a free Popup, which renders in its
own PopupRoot top-level. Free popups misplace themselves under fractional
display scaling (the popup-DPI quirk); a Flyout instead positions in the
trigger's own surface, so it stays correctly placed. This matches the
dialog-ownership parity contract for on-top dropdowns.

FwOptionPicker: its dropdown mode now opens through the same flyout path its
inline mode already uses. The Popup+manual placement was replaced with the
chromeless, focus-posting Flyout built by CreateOptionFlyout (refactored to a
shared BuildOptionFlyout so inline content and the dropdown's filter+list
panel both open through one implementation), anchored to the toggle button via
ShowAt and dismissed via Hide.

FwPosChooser: the collapsed POS tree dropdown was likewise moved from a free
Popup to a Flyout anchored to the toggle button, with the Fluent presenter
chrome stripped so the panel's own thin border is the only boundary.

Behavior is preserved in both: the dropdown opens on the same trigger, shows
the same content (the POS tree / the option list), keeps Up/Down/Enter/Escape
keyboard navigation, commits the selection the same way, and dismisses on pick
or light-dismiss. Open state now tracks the flyout's Opened/Closed events.

Added a regression guard to each control's tests asserting the control's own
logical tree contains no Popup element while the dropdown is open (the flyout
overlay is not a logical child), so the free-popup pattern cannot silently
return. Existing open/type/select/close behavioral tests stay green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: jasonleenaylor

Src/Common/FwAvalonia/FwAvaloniaTests/FwOptionPickerTests.cs

@@ -12,6 +12,7 @@
 using Avalonia.Headless.NUnit;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
 using Avalonia.Threading;
 using Avalonia.VisualTree;
 using NUnit.Framework;
@@ -596,6 +597,33 @@ public void Dropdown_CollapsedByDefault_ShowsSelection_PopupClosed_NoFilterFocus
 			Assert.That(toggle, Is.Not.Null, "the collapsed dropdown exposes a stable toggle automation id");
 		}
 
+		[AvaloniaTest]
+		public void Dropdown_IsHostedInAFlyout_NotAFreeStandingPopup()
+		{
+			// Parity/guidance guard: dropdown mode must open its filter+list on a Flyout anchored to the
+			// toggle button (the same CreateOptionFlyout path the inline consumers use), never a free
+			// Popup living in the picker's own tree. A free popup opens its own top-level and misplaces
+			// itself under fractional display scaling; a flyout positions itself in the trigger's surface.
+			// Assert the picker owns NO Popup element, collapsed AND while the dropdown is open.
+			var (picker, window, _) = ShowDropdown();
+			window.UpdateLayout();
+			Dispatcher.UIThread.RunJobs();
+			Assert.That(picker.GetLogicalDescendants().OfType<Popup>(), Is.Empty,
+				"the collapsed dropdown hosts no free Popup");
+
+			picker.OpenDropdown();
+			Dispatcher.UIThread.RunJobs();
+			AvaloniaHeadlessPlatform.ForceRenderTimerTick();
+			Dispatcher.UIThread.RunJobs();
+
+			Assert.That(picker.IsDropdownOpen, Is.True, "the dropdown opens");
+			Assert.That(picker.GetLogicalDescendants().OfType<Popup>(), Is.Empty,
+				"opening adds no free Popup to the picker tree — the list rides a Flyout top-level");
+			Assert.That(picker.OptionsList.GetVisualDescendants().OfType<TextBlock>()
+				.Any(t => t.Text == "Universe"), Is.True,
+				"the option list is realized in the flyout overlay");
+		}
+
 		[AvaloniaTest]
 		public void Dropdown_Open_ShowsTheOptionListOnTop_FilterFocused()
 		{

Src/Common/FwAvalonia/FwAvaloniaTests/FwPosChooserTests.cs

@@ -12,6 +12,7 @@
 using Avalonia.Headless.NUnit;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
 using Avalonia.Threading;
 using Avalonia.VisualTree;
 using NUnit.Framework;
@@ -169,6 +170,32 @@ public void Click_OpensTreePopup_OnTop_WithHierarchyExpanded()
 			CaptureOpenPopupContent("FwPosChooser-02-open-tree", filtered: false);
 		}
 
+		[AvaloniaTest]
+		public void Dropdown_IsHostedInAFlyout_NotAFreeStandingPopup()
+		{
+			// Parity/guidance guard: the tree dropdown must ride on a Flyout anchored to the toggle
+			// button, never a free Popup living in the chooser's own tree. A free popup opens its own
+			// top-level and misplaces itself under fractional display scaling; a flyout positions itself
+			// in the trigger's surface. Assert the chooser owns NO Popup element, collapsed AND while the
+			// dropdown is open (the flyout's overlay is not a logical child of the chooser).
+			var (chooser, window, _, _) = Show();
+			window.UpdateLayout();
+			Dispatcher.UIThread.RunJobs();
+			Assert.That(chooser.GetLogicalDescendants().OfType<Popup>(), Is.Empty,
+				"the collapsed chooser hosts no free Popup");
+
+			chooser.Open();
+			Dispatcher.UIThread.RunJobs();
+			AvaloniaHeadlessPlatform.ForceRenderTimerTick();
+			Dispatcher.UIThread.RunJobs();
+
+			Assert.That(chooser.IsOpen, Is.True, "the dropdown opens");
+			Assert.That(chooser.GetLogicalDescendants().OfType<Popup>(), Is.Empty,
+				"opening adds no free Popup to the chooser tree — the tree rides a Flyout top-level");
+			Assert.That(chooser.Tree.GetVisualDescendants().OfType<TreeViewItem>().Any(), Is.True,
+				"the tree content is realized in the flyout overlay");
+		}
+
 		[AvaloniaTest]
 		public void PickingTreeNode_Commits_Collapses_UpdatesId_AndRaisesSelectionChanged()
 		{

Src/Common/FwAvalonia/FwPosChooser.cs

@@ -76,12 +76,13 @@ public sealed class FwPosChooser : Border
 		private readonly bool _allowEmpty;
 		private string _emptyLabelText;
 
-		// Collapsed presentation (the field-sized box the user sees when the popup is closed).
+		// Collapsed presentation (the field-sized box the user sees when the dropdown is closed).
 		private readonly ToggleButton _dropdownButton;
 		private readonly TextBlock _dropdownLabel;
-		private readonly Popup _popup;
+		private readonly Flyout _flyout;
+		private bool _open;
 
-		// Popup content: a filter box stacked over EITHER the tree (no filter) or a flat result list (filter).
+		// Dropdown content: a filter box stacked over EITHER the tree (no filter) or a flat result list (filter).
 		private readonly TextBox _filterBox;
 		private readonly TreeView _tree;
 		private readonly ListBox _filterList;
@@ -238,32 +239,29 @@ public FwPosChooser(string automationId, bool allowEmpty = true, string emptyLab
 				MinWidth = FwAvaloniaDensity.DropdownMinWidth + 20,
 				Child = body
 			};
-			// The popup renders in its OWN top-level (PopupRoot), so keys typed in the filter box do not
-			// bubble to the chooser root. Register the navigation handler on the popup panel so
-			// Up/Down/Enter/Escape work while it is open (same pattern as FwOptionPicker dropdown mode).
+			AutomationProperties.SetAutomationId(_popupPanel, _automationId + ".Popup");
+			// The flyout body renders in its OWN top-level, so keys typed in the filter box do not bubble
+			// to the chooser root. Register the navigation handler on the panel so Up/Down/Enter/Escape
+			// work while it is open (same pattern as FwOptionPicker dropdown mode).
 			_popupPanel.AddHandler(InputElement.KeyDownEvent, OnPopupKeyDown,
 				RoutingStrategies.Bubble, handledEventsToo: true);
 
-			_popup = new Popup
+			// Host the tree on a Flyout anchored to the toggle button, not a free popup: a flyout
+			// positions itself in the trigger's own surface, so the dropdown stays correctly placed under
+			// fractional display scaling. The Fluent presenter chrome is stripped so the panel's own thin
+			// border is the only boundary the user sees.
+			_flyout = new Flyout
 			{
-				PlacementTarget = _dropdownButton,
 				Placement = PlacementMode.Bottom,
-				IsLightDismissEnabled = true,
-				// Zero footprint when closed so the layout tripwire never sees it overlapping the button.
-				Width = 0,
-				Height = 0,
-				HorizontalAlignment = HorizontalAlignment.Left,
-				VerticalAlignment = VerticalAlignment.Top,
-				Child = _popupPanel
+				Content = _popupPanel,
+				FlyoutPresenterTheme = ChromelessPresenterTheme()
 			};
-			AutomationProperties.SetAutomationId(_popup, _automationId + ".Popup");
-			_popup.Opened += OnPopupOpened;
-			_popup.Closed += OnPopupClosed;
+			_flyout.Opened += OnFlyoutOpened;
+			_flyout.Closed += OnFlyoutClosed;
 
-			var root = new Panel();
-			root.Children.Add(_dropdownButton);
-			root.Children.Add(_popup);
-			Child = root;
+			// The chooser's own visual content is just the collapsed toggle button; the tree lives in the
+			// flyout's separate top-level, shown on demand.
+			Child = _dropdownButton;
 
 			UpdateCollapsedLabel();
 		}
@@ -303,8 +301,8 @@ public string SelectedPosId
 		/// <summary>The display name shown collapsed (the selected POS name, or the empty-row label).</summary>
 		public string SelectedDisplayText => _dropdownLabel.Text ?? string.Empty;
 
-		/// <summary>True when the tree popup is currently open.</summary>
-		public bool IsOpen => _popup.IsOpen;
+		/// <summary>True when the tree flyout is currently open.</summary>
+		public bool IsOpen => _open;
 
 		/// <summary>The collapsed toggle button (the field-sized box the user clicks). For tests/hosts.</summary>
 		public ToggleButton DropdownButton => _dropdownButton;
@@ -319,16 +317,17 @@ public string SelectedPosId
 		public ListBox FilteredList => _filterList;
 
 		/// <summary>
-		/// Detaches and returns the on-top popup CONTENT panel (filter + tree/filter-list + create row)
-		/// for headless PNG capture only: a <see cref="Popup"/> renders in its own top-level, which the
-		/// host window's CaptureRenderedFrame does not include, so a snapshot of the chooser shows only the
-		/// collapsed box. Hosting THIS panel in a capture window renders the actual on-top tree the user
-		/// sees. The chooser is left non-functional afterward (the popup is emptied), so call it on a
-		/// throwaway instance — never in production.
+		/// Detaches and returns the on-top flyout CONTENT panel (filter + tree/filter-list + create row)
+		/// for headless PNG capture only: a flyout renders in its own top-level, which the host window's
+		/// CaptureRenderedFrame does not include, so a snapshot of the chooser shows only the collapsed
+		/// box. Hosting THIS panel in a capture window renders the actual on-top tree the user sees. The
+		/// chooser is left non-functional afterward (the flyout is emptied), so call it on a throwaway
+		/// instance — never in production.
 		/// </summary>
 		public Control DetachPopupContentForCapture()
 		{
-			_popup.Child = null;
+			_flyout.Hide();
+			_flyout.Content = null;
 			return _popupPanel;
 		}
 
@@ -478,13 +477,19 @@ private void CommitSelection(string id, string display, bool raise)
 
 		private void OnDropdownButtonCheckedChanged(object sender, RoutedEventArgs e)
 		{
-			_popup.IsOpen = _dropdownButton.IsChecked == true;
+			if (_flyout == null)
+				return;
+			if (_dropdownButton.IsChecked == true)
+				_flyout.ShowAt(_dropdownButton);
+			else
+				_flyout.Hide();
 		}
 
-		private void OnPopupOpened(object sender, EventArgs e)
+		private void OnFlyoutOpened(object sender, EventArgs e)
 		{
 			// Start each open with a clean filter (tree shown), then focus the filter box so typing filters
-			// immediately. Posted at Input priority so it runs after the popup's own layout/template.
+			// immediately. Posted at Input priority so it runs after the flyout's own layout/template.
+			_open = true;
 			if (!string.IsNullOrEmpty(_filterBox.Text))
 				_filterBox.Text = string.Empty;
 			else
@@ -493,15 +498,17 @@ private void OnPopupOpened(object sender, EventArgs e)
 				Avalonia.Threading.DispatcherPriority.Input);
 		}
 
-		private void OnPopupClosed(object sender, EventArgs e)
+		private void OnFlyoutClosed(object sender, EventArgs e)
 		{
+			// Keep the toggle button in sync when the flyout closes by light-dismiss (click-away).
+			_open = false;
 			if (_dropdownButton.IsChecked == true)
 				_dropdownButton.IsChecked = false;
 		}
 
 		private void CloseDropdown()
 		{
-			_popup.IsOpen = false;
+			_flyout.Hide();
 			_dropdownButton.IsChecked = false;
 		}
 
@@ -698,6 +705,23 @@ private static ControlTheme CompactListItemTheme()
 			return theme;
 		}
 
+		// Strip the Fluent FlyoutPresenter's heavy grey padding/border/background to nothing, so the
+		// tree panel's own thin border is the only boundary the user sees (mirrors the option-picker
+		// flyout look, keeping the two dropdowns visually consistent).
+		private static ControlTheme ChromelessPresenterTheme()
+		{
+			ControlTheme baseTheme = null;
+			if (Application.Current != null
+				&& Application.Current.TryGetResource(typeof(FlyoutPresenter), null, out var found))
+				baseTheme = found as ControlTheme;
+			var theme = new ControlTheme(typeof(FlyoutPresenter)) { BasedOn = baseTheme };
+			theme.Setters.Add(new Setter(TemplatedControl.PaddingProperty, new Thickness(0)));
+			theme.Setters.Add(new Setter(TemplatedControl.BorderThicknessProperty, new Thickness(0)));
+			theme.Setters.Add(new Setter(TemplatedControl.BackgroundProperty, Brushes.Transparent));
+			theme.Setters.Add(new Setter(TemplatedControl.CornerRadiusProperty, new CornerRadius(0)));
+			return theme;
+		}
+
 		/// <summary>
 		/// A tree node bound by the chooser's TreeView. Carries the expansion state (two-way bound to the
 		/// container) and the children, mirroring ChooserTreeNode but POS-specific and LCModel-free.