mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
fix(react): modal now mounts child component independently of other modals (#23903)
resolves #23904
This commit is contained in:
@ -35,12 +35,10 @@ export const createOverlayComponent = <
|
||||
forwardedRef?: React.ForwardedRef<OverlayType>;
|
||||
};
|
||||
|
||||
let isDismissing = false;
|
||||
|
||||
class Overlay extends React.Component<Props> {
|
||||
overlay?: OverlayType;
|
||||
el!: HTMLDivElement;
|
||||
|
||||
isDismissing = false;
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
if (typeof document !== 'undefined') {
|
||||
@ -75,7 +73,7 @@ export const createOverlayComponent = <
|
||||
shouldComponentUpdate(nextProps: Props) {
|
||||
// Check if the overlay component is about to dismiss
|
||||
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
||||
isDismissing = true;
|
||||
this.isDismissing = true;
|
||||
}
|
||||
|
||||
return true;
|
||||
@ -91,7 +89,7 @@ export const createOverlayComponent = <
|
||||
}
|
||||
if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
|
||||
await this.overlay.dismiss();
|
||||
isDismissing = false;
|
||||
this.isDismissing = false;
|
||||
|
||||
/**
|
||||
* Now that the overlay is dismissed
|
||||
@ -142,7 +140,7 @@ export const createOverlayComponent = <
|
||||
* overlay is dismissing otherwise component
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user