javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): modal now mounts child component independently of other modals (#23903)

Browse Source 
resolves #23904
This commit is contained in:
Michael Chen
2021-09-13 12:29:14 -07:00
committed by GitHub
parent 1ed9f07060
commit 1e13429731
1 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react/src/components/createOverlayComponent.tsx
View File

@ -35,12 +35,10 @@ export const createOverlayComponent = <
forwardedRef?: React.ForwardedRef<OverlayType>; forwardedRef?: React.ForwardedRef<OverlayType>;
}; };
let isDismissing = false;
class Overlay extends React.Component<Props> { class Overlay extends React.Component<Props> {
overlay?: OverlayType; overlay?: OverlayType;
el!: HTMLDivElement; el!: HTMLDivElement;
isDismissing = false;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
@ -75,7 +73,7 @@ export const createOverlayComponent = <
shouldComponentUpdate(nextProps: Props) { shouldComponentUpdate(nextProps: Props) {
// Check if the overlay component is about to dismiss // Check if the overlay component is about to dismiss
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) { if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
isDismissing = true; this.isDismissing = true;
} }
return true; return true;
@ -91,7 +89,7 @@ export const createOverlayComponent = <
} }
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) { if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
await this.overlay.dismiss(); await this.overlay.dismiss();
isDismissing = false; this.isDismissing = false;
/** /**
* Now that the overlay is dismissed * Now that the overlay is dismissed
@ -142,7 +140,7 @@ export const createOverlayComponent = <
* overlay is dismissing otherwise component * overlay is dismissing otherwise component
* will be hidden before animation is done. * will be hidden before animation is done.
*/ */
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el); return ReactDOM.createPortal(this.props.isOpen || this.isDismissing ? this.props.children : null, this.el);
} }
} }