fix(ui-tray): fix Tray component unmounting twice when closed

instructure · Oct 30, 2023 · 9aae923 · 9aae923
1 parent a716ceb
commit 9aae923
Showing 1 changed file with 54 additions and 51 deletions.
diff --git a/packages/ui-tray/src/Tray/index.tsx b/packages/ui-tray/src/Tray/index.tsx
@@ -70,18 +70,23 @@ class Tray extends Component<TrayProps> {
     shadow: true,
     border: false
   }
+  ref: Element | null = null
 
-  state: TrayState = {
-    transitioning: false
+  constructor(props: TrayProps) {
+    super(props)
+    this.state = {
+      transitioning: false,
+      open: props.open
+    }
   }
-  ref: Element | null = null
+
   componentDidMount() {
     this.props.makeStyles?.()
   }
 
   componentDidUpdate(prevProps: TrayProps, _prevState: TrayState) {
     if (this.props.open !== prevProps.open) {
-      this.setState({ transitioning: true })
+      this.setState({ transitioning: true, open: this.props.open })
     }
     this.props.makeStyles?.()
   }
@@ -163,7 +168,7 @@ class Tray extends Component<TrayProps> {
       ...props
     } = this.props
 
-    const portalIsOpen = open || this.state.transitioning
+    const portalIsOpen = this.state.open || this.state.transitioning
 
     return (
       <Portal
@@ -172,54 +177,52 @@ class Tray extends Component<TrayProps> {
         insertAt={insertAt}
         mountNode={mountNode}
       >
-        {portalIsOpen && (
-          <Transition
-            in={open}
-            type={this.transition}
-            onTransition={onTransition}
-            onEnter={onEnter}
-            onEntering={onEntering}
-            onEntered={createChainedFunction(
-              this.handleTransitionComplete,
-              onEntered,
-              onOpen
-            )}
-            onExit={onExit}
-            onExiting={onExiting}
-            onExited={createChainedFunction(
-              this.handleTransitionComplete,
-              onExited,
-              onClose
-            )}
-            transitionOnMount={transitionOnMount}
-            transitionEnter={transitionEnter}
-            transitionExit={transitionExit}
+        <Transition
+          in={open}
+          type={this.transition}
+          onTransition={onTransition}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={createChainedFunction(
+            this.handleTransitionComplete,
+            onEntered,
+            onOpen
+          )}
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={createChainedFunction(
+            this.handleTransitionComplete,
+            onExited,
+            onClose
+          )}
+          transitionOnMount={transitionOnMount}
+          transitionEnter={transitionEnter}
+          transitionExit={transitionExit}
+        >
+          <span
+            {...omitProps(props, Tray.allowedProps)}
+            css={this.props.styles?.tray}
+            ref={contentRef}
           >
-            <span
-              {...omitProps(props, Tray.allowedProps)}
-              css={this.props.styles?.tray}
-              ref={contentRef}
+            <Dialog
+              as="div"
+              label={label}
+              defaultFocusElement={defaultFocusElement}
+              open
+              shouldContainFocus={
+                !this.state.transitioning && shouldContainFocus
+              }
+              shouldReturnFocus={shouldReturnFocus}
+              shouldCloseOnDocumentClick={shouldCloseOnDocumentClick}
+              shouldCloseOnEscape
+              liveRegion={liveRegion}
+              onDismiss={onDismiss}
+              role={role}
             >
-              <Dialog
-                as="div"
-                label={label}
-                defaultFocusElement={defaultFocusElement}
-                open
-                shouldContainFocus={
-                  !this.state.transitioning && shouldContainFocus
-                }
-                shouldReturnFocus={shouldReturnFocus}
-                shouldCloseOnDocumentClick={shouldCloseOnDocumentClick}
-                shouldCloseOnEscape
-                liveRegion={liveRegion}
-                onDismiss={onDismiss}
-                role={role}
-              >
-                <div css={this.props.styles?.content}>{children}</div>
-              </Dialog>
-            </span>
-          </Transition>
-        )}
+              <div css={this.props.styles?.content}>{children}</div>
+            </Dialog>
+          </span>
+        </Transition>
       </Portal>
     )
   }