admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Ensure attachment modal appears above Command Menu button using createPortal (#12112)

Browse Source 
<img width="1509" alt="Screenshot 2025-05-19 at 12 50 48 AM"
src="https://github.com/user-attachments/assets/fba95ecb-015a-4742-bda2-4d515d168c16"
/>


Closes #12092
This commit is contained in:
Abdul Rahman
2025-05-20 02:38:31 +05:30
committed by GitHub
parent 4f4f3a64fd
commit 42c69dd11a
1 changed files with 49 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { lazy, ReactElement, Suspense, useState } from 'react';
import { createPortal } from 'react-dom';
import { DropZone } from '@/activities/files/components/DropZone';
import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
@ -184,52 +185,55 @@ export const AttachmentList = ({
</StyledDropZoneContainer>
</StyledContainer>
)}
{previewedAttachment && isAttachmentPreviewEnabled && (
<StyledModal
modalId={PREVIEW_MODAL_ID}
size="large"
isClosable
onClose={handleClosePreview}
>
<StyledModalHeader>
<StyledHeader>
<StyledModalTitle>{previewedAttachment.name}</StyledModalTitle>
<StyledButtonContainer>
<IconButton
Icon={IconDownload}
onClick={handleDownload}
size="small"
/>
<IconButton
Icon={IconX}
onClick={handleClosePreview}
size="small"
/>
</StyledButtonContainer>
</StyledHeader>
</StyledModalHeader>
<ScrollWrapper
componentInstanceId={`preview-modal-${previewedAttachment.id}`}
{previewedAttachment &&
isAttachmentPreviewEnabled &&
createPortal(
<StyledModal
modalId={PREVIEW_MODAL_ID}
size="large"
isClosable
onClose={handleClosePreview}
>
<StyledModalContent>
<Suspense
fallback={
<StyledLoadingContainer>
<StyledLoadingText>
Loading document viewer...
</StyledLoadingText>
</StyledLoadingContainer>
}
>
<DocumentViewer
documentName={previewedAttachment.name}
documentUrl={previewedAttachment.fullPath}
/>
</Suspense>
</StyledModalContent>
</ScrollWrapper>
</StyledModal>
)}
<StyledModalHeader>
<StyledHeader>
<StyledModalTitle>{previewedAttachment.name}</StyledModalTitle>
<StyledButtonContainer>
<IconButton
Icon={IconDownload}
onClick={handleDownload}
size="small"
/>
<IconButton
Icon={IconX}
onClick={handleClosePreview}
size="small"
/>
</StyledButtonContainer>
</StyledHeader>
</StyledModalHeader>
<ScrollWrapper
componentInstanceId={`preview-modal-${previewedAttachment.id}`}
>
<StyledModalContent>
<Suspense
fallback={
<StyledLoadingContainer>
<StyledLoadingText>
Loading document viewer...
</StyledLoadingText>
</StyledLoadingContainer>
}
>
<DocumentViewer
documentName={previewedAttachment.name}
documentUrl={previewedAttachment.fullPath}
/>
</Suspense>
</StyledModalContent>
</ScrollWrapper>
</StyledModal>,
document.body,
)}
</>
);
};