SplitView -- Clicking outside the open Pane doesn't close the SplitView

[jmurth1234]

Expected Behaviour

Clicking outside the open SplitView pane will close it

Actual

It appears that for whatever reason. clicking the area does nothing. Resizing the window does close it

Video Demonstration (recorded with xboix game bar so recording finished as I resized the video)

https://user-images.githubusercontent.com/581104/126878716-72bce382-a262-405e-b168-4a62e7ae50e9.mp4

Other Info

Versions are as follows:

    "react-native": "0.64.2",
    "react-native-windows": "^0.64.14",
    "react-native-xaml": "^0.0.37",

WinUI Version: 2.6.1

Here is the code of the component in the video:

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';
  const [paneOpen, setPaneOpen] = React.useState(false);
  const [paneType, setPaneType] = React.useState(SplitViewDisplayMode.Inline);

  const ToggleButton = props => (
    <Button
      {...props}
      onClick={e => {
        setPaneOpen(!paneOpen);
      }}
      content={paneOpen ? 'Close' : 'Open'}
    />
  );

  return (
    <SplitView
      style={{flex: 1}}
      lightDismissOverlayMode={LightDismissOverlayMode.On}
      isPaneOpen={paneOpen}
      displayMode={paneType}
      onPaneClosed={() => setPaneOpen(false)}
      verticalAlignment={VerticalAlignment.Stretch}>
      <StackPanel
        orientation={Orientation.Vertical}
        verticalAlignment={VerticalAlignment.Stretch}
        priority={SplitViewPriority.Pane}>
        <ToggleButton margin={8} />
        <Button
          margin={8}
          content={'Inline'}
          onClick={e => {
            setPaneType(SplitViewDisplayMode.Inline);
          }}
        />
        <Button
          margin={8}
          content={'Overlay'}
          onClick={e => {
            setPaneType(SplitViewDisplayMode.Overlay);
          }}
        />
      </StackPanel>

      <StackPanel
        orientation={Orientation.Vertical}
        verticalAlignment={VerticalAlignment.Stretch}
        priority={SplitViewPriority.Content}>
        <StackPanel
          margin={4}
          orientation={Orientation.Horizontal}
          verticalAlignment={VerticalAlignment.Stretch}
          priority={SplitViewPriority.Content}>
          <ToggleButton />

          <TextBlock
            text={'Title'}
            padding={8}
            style={{fontSize: 16, fontWeight: 600}}
            verticalAlignment={VerticalAlignment.Center}
          />
        </StackPanel>

        <TextBlock
            text={'Content'}
            padding={8}
            style={{fontSize: 16}}
            verticalAlignment={VerticalAlignment.Center}
          />
      </StackPanel>
    </SplitView>
  );
};

[asklar]

Splitview puts up a light dismiss rectangle to get clicks and get notified when the user clicks outside. In the context of RN, the Yoga layout engine is stomping over XAML's native layout and setting the size of the light dismiss rectangle to be 0x0: