From 73a30014becff07438d66ff3b437671b445eef6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= Date: Wed, 8 Nov 2023 14:04:24 +0100 Subject: [PATCH] fix(ui-modal): fix second modal closing the first one if two of them are open --- packages/ui-modal/src/Modal/index.tsx | 72 +++++++++++++-------------- packages/ui-modal/src/Modal/props.ts | 4 +- 2 files changed, 37 insertions(+), 39 deletions(-) diff --git a/packages/ui-modal/src/Modal/index.tsx b/packages/ui-modal/src/Modal/index.tsx index 87b5f7ab04..acf083d483 100644 --- a/packages/ui-modal/src/Modal/index.tsx +++ b/packages/ui-modal/src/Modal/index.tsx @@ -96,7 +96,8 @@ class Modal extends Component { super(props) this.state = { - transitioning: false + transitioning: false, + open: props.open ?? false } } @@ -114,11 +115,8 @@ class Modal extends Component { } componentDidUpdate(prevProps: ModalProps) { - if (prevProps.open && !this.props.open) { - // closing - this.setState({ - transitioning: prevProps.transition !== null - }) + if (this.props.open !== prevProps.open) { + this.setState({ transitioning: true, open: !!this.props.open }) } this.props.makeStyles?.() } @@ -146,7 +144,7 @@ class Modal extends Component { this.DOMNode = DOMNode } - handleTransitionExited: ModalProps['onExited'] = () => { + handleTransitionComplete: ModalProps['onEntered' | 'onExited'] = () => { this.setState({ transitioning: false }) @@ -252,46 +250,46 @@ class Modal extends Component { onExiting, onExited, constrain, - overflow, + overflow, // TODO this is not used currently ...passthroughProps } = this.props - const portalIsOpen = open || this.state.transitioning + const portalIsOpen = this.state.open || this.state.transitioning return ( - {portalIsOpen && ( - - {constrain === 'parent' ? ( - - {this.renderDialog(passthroughProps)} - - ) : ( - this.renderDialog(passthroughProps) - )} - - )} + + {constrain === 'parent' ? ( + + {this.renderDialog(passthroughProps)} + + ) : ( + this.renderDialog(passthroughProps) + )} + ) } diff --git a/packages/ui-modal/src/Modal/props.ts b/packages/ui-modal/src/Modal/props.ts index 71114a5854..6e6551acfc 100644 --- a/packages/ui-modal/src/Modal/props.ts +++ b/packages/ui-modal/src/Modal/props.ts @@ -45,7 +45,6 @@ import type { LiveRegion, UIElement } from '@instructure/shared-types' -import type { PortalNode } from '@instructure/ui-portal' import type { PositionMountNode } from '@instructure/ui-position' import type { TransitionType } from '@instructure/ui-motion' import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' @@ -70,7 +69,7 @@ type ModalPropsForPortal = { /** * Callback fired when `` content has been mounted in the DOM */ - onOpen?: (DOMNode: PortalNode) => void + onOpen?: (type?: TransitionType) => void /** * Callback fired when `` has been unmounted from the DOM @@ -201,6 +200,7 @@ type ModalStyle = ComponentStyle<'modal' | 'constrainContext'> type ModalState = { transitioning: boolean + open: boolean } const propTypes: PropValidators = {