From 1e5257f95bf535ffa77d4e6321222ffeae667e36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 23 May 2025 18:26:30 +0200
Subject: [PATCH] Fixes active row state after opening the file preview
 (#12264)

Fixes #12093
This bug was quite hard to fix because it was an issue with the
`AnimatePresence` component of the framer motion library.

After investigating the issue with @Devessier, here is what we
understood:

Since the modal component has an exit animation but wasn't wrapped
inside an `AnimatePresence` component, the animation seemed to never be
marked as complete when we closed the modal and the component did not
appear anymore but was still in the dom.

This caused an issue when closing the side panel because the state
cleanup function of the command menu is triggered when its closing
animation is complete. This cleanup function emits a right drawer close
event, which is listened by the record table row to update it's state.

The `onExitComplete` was never triggered because the exit animation of
the modal was never considered as complete, and since it's a children
animation of the command menu `AnimatePresence`, this animation was
never considered as complete either (see [PresenceChild
doc](https://github.com/motiondivision/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/PresenceChild.tsx).

This caused the cleanup function to never be executed and the close
event to never be emitted, so the row stayed active.

Before:


https://github.com/user-attachments/assets/a165039b-6203-43d6-b992-dcfb4dfb8f2b


After:


https://github.com/user-attachments/assets/42eab2e8-62c9-4c25-85d6-78210d7ebe89
---
 .../modal/components/ConfirmationModal.tsx    | 103 +++++++++---------
 .../ui/layout/modal/components/Modal.tsx      |   6 +-
 2 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
index 3fb21adf2..5e7367df0 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { ReactNode, useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -108,62 +107,58 @@ export const ConfirmationModal = ({
   };
 
   return (
-    <AnimatePresence mode="wait">
-      <LayoutGroup>
-        <StyledConfirmationModal
-          modalId={modalId}
-          onClose={() => {
-            onClose?.();
-          }}
-          onEnter={handleEnter}
-          isClosable={true}
-          padding="large"
-          modalVariant={modalVariant}
-          data-globally-prevent-click-outside
-        >
-          <StyledCenteredTitle>
-            <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
-          </StyledCenteredTitle>
-          <StyledSection
-            alignment={SectionAlignment.Center}
-            fontColor={SectionFontColor.Primary}
-          >
-            {subtitle}
-          </StyledSection>
-          {confirmationValue && (
-            <Section>
-              <TextInput
-                dataTestId="confirmation-modal-input"
-                value={inputConfirmationValue}
-                onChange={handleInputConfimrationValueChange}
-                placeholder={confirmationPlaceholder}
-                fullWidth
-                disableHotkeys
-                key={'input-' + confirmationValue}
-              />
-            </Section>
-          )}
-          <StyledCenteredButton
-            onClick={handleCancelClick}
-            variant="secondary"
-            title={t`Cancel`}
+    <StyledConfirmationModal
+      modalId={modalId}
+      onClose={() => {
+        onClose?.();
+      }}
+      onEnter={handleEnter}
+      isClosable={true}
+      padding="large"
+      modalVariant={modalVariant}
+      data-globally-prevent-click-outside
+    >
+      <StyledCenteredTitle>
+        <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
+      </StyledCenteredTitle>
+      <StyledSection
+        alignment={SectionAlignment.Center}
+        fontColor={SectionFontColor.Primary}
+      >
+        {subtitle}
+      </StyledSection>
+      {confirmationValue && (
+        <Section>
+          <TextInput
+            dataTestId="confirmation-modal-input"
+            value={inputConfirmationValue}
+            onChange={handleInputConfimrationValueChange}
+            placeholder={confirmationPlaceholder}
             fullWidth
-            dataTestId="confirmation-modal-cancel-button"
+            disableHotkeys
+            key={'input-' + confirmationValue}
           />
+        </Section>
+      )}
+      <StyledCenteredButton
+        onClick={handleCancelClick}
+        variant="secondary"
+        title={t`Cancel`}
+        fullWidth
+        dataTestId="confirmation-modal-cancel-button"
+      />
 
-          {AdditionalButtons}
+      {AdditionalButtons}
 
-          <StyledCenteredButton
-            onClick={handleConfirmClick}
-            variant="secondary"
-            accent={confirmButtonAccent}
-            title={confirmButtonText}
-            disabled={!isValidValue || loading}
-            fullWidth
-            dataTestId="confirmation-modal-confirm-button"
-          />
-        </StyledConfirmationModal>
-      </LayoutGroup>
-    </AnimatePresence>
+      <StyledCenteredButton
+        onClick={handleConfirmClick}
+        variant="secondary"
+        accent={confirmButtonAccent}
+        title={confirmButtonText}
+        disabled={!isValidValue || loading}
+        fullWidth
+        dataTestId="confirmation-modal-confirm-button"
+      />
+    </StyledConfirmationModal>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
index 451f80568..d2670416c 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
@@ -12,7 +12,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import React, { useRef } from 'react';
 const StyledModalDiv = styled(motion.div)<{
   size?: ModalSize;
@@ -221,7 +221,7 @@ export const Modal = ({
   };
 
   return (
-    <>
+    <AnimatePresence mode="wait">
       {isModalOpened && (
         <ModalComponentInstanceContext.Provider
           value={{
@@ -266,7 +266,7 @@ export const Modal = ({
           </ClickOutsideListenerContext.Provider>
         </ModalComponentInstanceContext.Provider>
       )}
-    </>
+    </AnimatePresence>
   );
 };