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

resolves #23904
This commit is contained in:
Michael Chen
2021-09-13 12:29:14 -07:00
committed by GitHub
parent 1ed9f07060
commit 1e13429731

View File

@ -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);
}
}