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