Skip to content

Fix crash in Islands when opening Flyout without a target #8300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NickGerleman merged 3 commits into from
Oct 8, 2021
Merged

Fix crash in Islands when opening Flyout without a target #8300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3078d6
Fix crash in Islands when opening Flyout without a target #6714
lyahdav Jul 21, 2021
d1abf4c
Change files
lyahdav Jul 21, 2021
ac8efef
change try_as to as
lyahdav Sep 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-e865cdf3-241b-45bd-ad8b-fa2df55df4cf.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Fix crash in Islands when opening Flyout without a target #6714",
"packageName": "react-native-windows",
"email": "lyahdav@users.noreply.github.com",
"dependentChangeType": "patch"
}
35 changes: 35 additions & 0 deletions packages/@react-native-windows/tester/src/js/examples-win/Flyout/FlyoutExample.windows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ import {Flyout, Picker, Popup, Placement} from 'react-native-windows';

interface IFlyoutExampleState {
isFlyoutVisible: boolean;
isFlyoutNoTargetVisible: boolean;
isFlyoutTwoVisible: boolean;
isPopupVisible: boolean;
buttonTitle: string;
buttonNoTargetTitle: string;
isLightDismissEnabled: boolean;
isOverlayEnabled: boolean;
popupSwitchState: boolean;
Expand Down Expand Up @@ -41,9 +43,11 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {

public state: IFlyoutExampleState = {
isFlyoutVisible: false,
isFlyoutNoTargetVisible: false,
isFlyoutTwoVisible: false,
isPopupVisible: false,
buttonTitle: 'Open Flyout',
buttonNoTargetTitle: 'Open Flyout without Target',
isLightDismissEnabled: true,
isOverlayEnabled: false,
popupSwitchState: true,
Expand Down Expand Up @@ -76,6 +80,12 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
<View style={{justifyContent: 'center', padding: 20, width: 200}}>
<Button onPress={this._onPress} title={this.state.buttonTitle} />
</View>
<View style={{justifyContent: 'center', padding: 20, width: 200}}>
<Button
onPress={this._onPressButtonNoTarget}
title={this.state.buttonNoTargetTitle}
/>
</View>
<View style={{flexDirection: 'row', paddingTop: 200}}>
<Text style={{padding: 10, width: 300, height: 32}}>
Text Input to Anchor flyout to:{' '}
Expand Down Expand Up @@ -193,6 +203,17 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
</View>
</Flyout>
)}
{this.state.isFlyoutNoTargetVisible && (
<Flyout
isOpen={this.state.isFlyoutNoTargetVisible}
isLightDismissEnabled={true}
onDismiss={this._onFlyoutNoTargetDismissed}>
<View
style={{backgroundColor: 'lightblue', width: 200, height: 300}}>
<Text>{lorumIpsum}</Text>
</View>
</Flyout>
)}
{this.state.isPopupVisible && (
<Popup
isOpen={this.state.isPopupVisible}
Expand Down Expand Up @@ -225,6 +246,13 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
this.setState({buttonTitle: 'Close Flyout', isFlyoutVisible: true});
};

_onPressButtonNoTarget = () => {
this.setState({
buttonNoTargetTitle: 'Close Flyout without Target',
isFlyoutNoTargetVisible: true,
});
};

_onFlyoutButtonPressed = () => {
this.setState({buttonTitle: 'Open Flyout', isFlyoutVisible: false});
};
Expand All @@ -247,6 +275,13 @@ class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
_onFlyoutTwoDismissed = (_isOpen: boolean) => {
this.setState({isFlyoutTwoVisible: false});
};

_onFlyoutNoTargetDismissed = (_isOpen: boolean) => {
this.setState({
buttonNoTargetTitle: 'Open Flyout without Target',
isFlyoutNoTargetVisible: false,
});
};
}

export const displayName = (_undefined?: string) => {};
Expand Down
11 changes: 10 additions & 1 deletion vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,16 @@ void FlyoutShadowNode::SetTargetFrameworkElement() {
}
}
} else {
m_targetElement = xaml::Window::Current().Content().as<xaml::FrameworkElement>();
if (IsXamlIsland()) {
// // XamlRoot added in 19H1
if (Is19H1OrHigher()) {
if (auto xamlRoot = React::XamlUIService::GetXamlRoot(GetViewManager()->GetReactContext().Properties())) {
m_targetElement = xamlRoot.Content().as<xaml::FrameworkElement>();
}
}
} else {
m_targetElement = xaml::Window::Current().Content().as<xaml::FrameworkElement>();
}
}
}

Expand Down