From 8c9e2e5dc2d5bc715875961cdff339232413b1da Mon Sep 17 00:00:00 2001
From: Bence Toppanto <bence.toppanto@instructure.com>
Date: Thu, 12 Oct 2023 21:53:21 +0200
Subject: [PATCH] fix(ui-drawer-layout,ui-tray): fix multiple mounting during
 transition

Closes: INSTUI-3887
---
 .../src/DrawerLayout/DrawerTray/index.tsx     | 46 +++++++++----------
 packages/ui-tray/src/Tray/index.tsx           | 36 +++++++--------
 2 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/index.tsx b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/index.tsx
index 4efc5f7c6c..21cff219d3 100644
--- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/index.tsx
+++ b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/index.tsx
@@ -252,30 +252,28 @@ class DrawerTray extends Component<
                 ref={this.handleContentRef}
                 css={trayStyles}
               >
-                {this.state.transitioning ? (
-                  this.renderContent()
-                ) : (
-                  <Dialog
-                    open
-                    role={shouldOverlayTray ? 'dialog' : 'region'}
-                    label={label}
-                    shouldReturnFocus={shouldReturnFocus}
-                    shouldContainFocus={shouldContainFocus && shouldOverlayTray}
-                    shouldCloseOnDocumentClick={
-                      shouldCloseOnDocumentClick && shouldOverlayTray
-                    }
-                    shouldCloseOnEscape={
-                      shouldCloseOnEscape && shouldOverlayTray
-                    }
-                    defaultFocusElement={defaultFocusElement}
-                    liveRegion={liveRegion}
-                    onDismiss={onDismiss}
-                    as="div"
-                    css={this.props.styles?.drawerTrayContent}
-                  >
-                    {this.renderContent()}
-                  </Dialog>
-                )}
+                <Dialog
+                  open
+                  role={shouldOverlayTray ? 'dialog' : 'region'}
+                  label={label}
+                  shouldReturnFocus={shouldReturnFocus}
+                  shouldContainFocus={
+                    !this.state.transitioning &&
+                    shouldContainFocus &&
+                    shouldOverlayTray
+                  }
+                  shouldCloseOnDocumentClick={
+                    shouldCloseOnDocumentClick && shouldOverlayTray
+                  }
+                  shouldCloseOnEscape={shouldCloseOnEscape && shouldOverlayTray}
+                  defaultFocusElement={defaultFocusElement}
+                  liveRegion={liveRegion}
+                  onDismiss={onDismiss}
+                  as="div"
+                  css={this.props.styles?.drawerTrayContent}
+                >
+                  {this.renderContent()}
+                </Dialog>
               </div>
             </Transition>
           )
diff --git a/packages/ui-tray/src/Tray/index.tsx b/packages/ui-tray/src/Tray/index.tsx
index 8a3b61960b..6223e47785 100644
--- a/packages/ui-tray/src/Tray/index.tsx
+++ b/packages/ui-tray/src/Tray/index.tsx
@@ -201,25 +201,23 @@ class Tray extends Component<TrayProps> {
               css={this.props.styles?.tray}
               ref={contentRef}
             >
-              {this.state.transitioning ? (
-                children
-              ) : (
-                <Dialog
-                  as="div"
-                  label={label}
-                  defaultFocusElement={defaultFocusElement}
-                  open
-                  shouldContainFocus={shouldContainFocus}
-                  shouldReturnFocus={shouldReturnFocus}
-                  shouldCloseOnDocumentClick={shouldCloseOnDocumentClick}
-                  shouldCloseOnEscape
-                  liveRegion={liveRegion}
-                  onDismiss={onDismiss}
-                  role={role}
-                >
-                  <div css={this.props.styles?.content}>{children}</div>
-                </Dialog>
-              )}
+              <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>
         )}