Cannot navigate any elements with XYFocusKeyboardNavigation enabled (e.g. CommandBarFlyout) with keyboard if dpiAwareness is enabled in XAML Islands App

[lyahdav]

Describe the bug
Cannot navigate CommandBarFlyout with keyboard if dpiAwareness is enabled in XAML Islands App. This was first detected in React Native Windows and an issue was filed here microsoft/react-native-windows#8306. But after further investigation, this is a XAML Islands bug not related to React Native Windows.

Steps to reproduce the bug

1. Create XAML Islands app.
2. Add a TextBox to UI.
3. In app.manifest add:

  <application xmlns="urn:schemas-microsoft-com:asm.v3">
    <windowsSettings>
		<dpiAwareness>PerMonitorV2</dpiAwareness>
	</windowsSettings>
  </application>

4. Run app
5. Right click on TextBox.
6. Use keyboard up/down arrows to navigate the context menu.

Note the bug only seems to happen on certain monitors, possibly based on certain resolution/DPI settings.

Expected behavior
Expected that navigation works but pressing arrow keys does nothing.

Screenshots
Here's a video reproducing the bug:

126676232-4dcbb75c-d1a6-4896-916d-38eeed4fc190.mp4

Here's things working correctly if that dpiAwareness isn't set:

126676269-aa866996-a3dd-4583-9855-0901fe4f8e5f.mp4

Version Info
Windows 10 21H1 / 19043 Islands

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

Additional context

[StephenLPeters]

@Austin-Lamb @JesseCol I'm not sure what dpi awareness does, can you inform us?

There was a very similar issue that was fixed very recently. I wonder if this is a duplicate of that other issue tracked internally here

[lyahdav]

A workaround is to use the WinUI 2 (I was using version 2.6.1-prerelease.210709001) CommandBarFlyout, and add another workaround on top of that to fix a crash that happens. I documented in the comments of a related GitHub issue starting with this one: microsoft/react-native-windows#8306 (comment)

[lyahdav]

If you don't want to use WinUI 2 to fix this, I was able to workaround this by subclassing CommandBarFlyout and adding in some hacks. I have a working example here: https://github.com/lyahdav/XamlIslandsFlyoutBug/tree/command-bar-flyout-kb-bug-with-dpi-awareness. Note there are some TODOs there that still need to be addressed for a full solution. Basically I copied the keyboard navigation code from WinUI 2.

[lyahdav]

I'm leaving this open in case it needs to be fixed in Windows 11 OS XAML. Haven't verified if it's fixed there.

[lyahdav]

I found out that this bug is more generic than just CommandBarFlyout, so I'm going to retitle it. It happens when setting the UIElement.XYFocusKeyboardNavigation Property to Enabled. I'm pretty sure this is how arrow keys change focus in CommandBarFlyout in system XAML. Pretty sure WinUI 2 CommandBarFlyout doesn't have this bug because it doesn't rely on XYFocusKeyboardNavigation and instead manually handles the keyboard up/down arrow key press events.

I also found another workaround: Nest the element with XYFocusKeyboardNavigation inside a ScrollViewer which clips its content. With some additional changes you can make it seem like there is no ScrollViewer (e.g. hiding the scroll bars). I have a working version of this here: https://github.com/lyahdav/XamlPlayground/tree/XYFocusKeyboardNavigation-bug

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[lyahdav]

Likely still relevant