Flyout without target in Xaml Islands crashes app

[lyahdav]

Environment

1. npx react-native --version: 4.13.0
2. npx react-native run-windows --info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (40) x64 Intel(R) Xeon(R) Gold 6248 CPU @ 2.50GHz
    Memory: 157.00 GB / 190.60 GB
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.0-20190429.1820 - C:\open\fbsource\xplat\third-party\yarn\yarn.BAT
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20200724.030019 - C:\tools\watchman\watchman.EXE
  Installed UWP SDKs:
    10.0.18362.0

3. reg query "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock"

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock
    AllowDevelopmentWithoutDevLicense    REG_DWORD    0x1
    AllowAllTrustedApps    REG_DWORD    0x1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. In playground win-32 app make a Flyout with target prop not set.
2. Open Flyout.

Expected Results

Expected: Flyout opens relative to window.
Actual: Crash

It crashes because on this line xaml::Window::Current().Content() returns null in Xaml Islands. A quick workaround is to replace that line with:

    if (auto flyoutBase6 = m_flyout.try_as<winrt::IFlyoutBase6>()) {
      m_targetElement = flyoutBase6.XamlRoot().Content().as<winrt::FrameworkElement>();
    }

But I'm not sure if it makes sense to use the existing code if you're not in Islands.

[asklar]

I think the right thing to do here is to use the XamlUIService XamlRoot property instead

[paperbackdragon]

We're hitting this issue with our xaml islands setup, notably because the react native developer menu uses a flyout. This prevents us from using the built-in element inspector for styling purposes. We're considering using react-native-web package to get around this and have a way to do element inspection, but it's not ideal.

[lyahdav]

@paperbackdragon for now there's a simple workaround towards the bottom of my original post.