SplitView -- Clicking outside the open Pane doesn't close the SplitView #119
Description
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)
miniradioapp.2021-07-24.20-00-13.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>
);
};