Merge pull request #8564 from weseek/fix/141652-141811-cannot-attachment-file-in-firefox

fix: File dialog works correctly

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropdownItem.tsx

@@ -11,6 +11,7 @@ type Props = {
   acceptedUploadFileType: AcceptedUploadFileType,
   children?: ReactNode,
   onUpload?: (files: File[]) => void,
+  onClose?: () => void,
 }
 
 export const AttachmentsDropdownItem = (props: Props): JSX.Element => {
@@ -19,6 +20,7 @@ export const AttachmentsDropdownItem = (props: Props): JSX.Element => {
     acceptedUploadFileType,
     children,
     onUpload,
+    onClose,
   } = props;
 
   const {
@@ -26,17 +28,20 @@ export const AttachmentsDropdownItem = (props: Props): JSX.Element => {
     getInputProps,
     open,
   } = useFileDropzone({
-    onUpload,
+    onUpload: (files: File[]) => { onUpload?.(files); onClose?.() },
     acceptedUploadFileType,
     dropzoneOpts: {
-      noClick: true, noDrag: true, noKeyboard: true,
+      noClick: true,
+      noDrag: true,
+      noKeyboard: true,
+      onFileDialogCancel: onClose,
     },
   });
 
   return (
     <div {...getRootProps()} className="dropzone">
       <input {...getInputProps()} />
-      <DropdownItem className="d-flex gap-2 align-items-center" onClick={open}>
+      <DropdownItem toggle={false} className="d-flex gap-2 align-items-center" onClick={open}>
         {children}
       </DropdownItem>
     </div>

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropup.tsx

@@ -43,14 +43,14 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
           <DropdownItem divider />
 
           { acceptedUploadFileType === AcceptedUploadFileType.ALL && (
-            <AttachmentsDropdownItem acceptedUploadFileType={AcceptedUploadFileType.ALL} onUpload={onUpload}>
+            <AttachmentsDropdownItem acceptedUploadFileType={AcceptedUploadFileType.ALL} onUpload={onUpload} onClose={() => setOpen(false)}>
               <span className="material-symbols-outlined fs-5">attach_file</span>
               Files
             </AttachmentsDropdownItem>
           ) }
 
           { acceptedUploadFileType !== AcceptedUploadFileType.NONE && (
-            <AttachmentsDropdownItem acceptedUploadFileType={AcceptedUploadFileType.IMAGE} onUpload={onUpload}>
+            <AttachmentsDropdownItem acceptedUploadFileType={AcceptedUploadFileType.IMAGE} onUpload={onUpload} onClose={() => setOpen(false)}>
               <span className="material-symbols-outlined fs-5">image</span>
               Images
             </AttachmentsDropdownItem>