From 113d26b43b549233689445e3cfb0d465cef8fc77 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Mon, 23 Sep 2024 13:31:42 +0200
Subject: [PATCH] fix(ui-commons): file dialog doesn't open on Firefox with
 UploadFileButton

---
 .../common/buttons/UploadFileButton.tsx       | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/webapp/src/components/common/buttons/UploadFileButton.tsx b/webapp/src/components/common/buttons/UploadFileButton.tsx
index a156825136..306419870a 100644
--- a/webapp/src/components/common/buttons/UploadFileButton.tsx
+++ b/webapp/src/components/common/buttons/UploadFileButton.tsx
@@ -36,7 +36,10 @@ function UploadFileButton(props: UploadFileButtonProps) {
   const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
   const { enqueueSnackbar } = useSnackbar();
   const [isUploading, setIsUploading] = useState(false);
-  const { open } = useDropzone({ onDropAccepted: handleDropAccepted, accept });
+  const { getInputProps, open } = useDropzone({
+    onDropAccepted: handleDropAccepted,
+    accept,
+  });
 
   // Prevent the user from accidentally leaving the page while uploading
   useEffect(() => {
@@ -95,17 +98,21 @@ function UploadFileButton(props: UploadFileButtonProps) {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <LoadingButton
-      variant="outlined"
-      size="small"
-      onClick={open}
-      startIcon={<FileDownloadIcon />}
-      loadingPosition="start"
-      loading={isUploading}
-      disabled={disabled}
-    >
-      {label}
-    </LoadingButton>
+    <>
+      {/* `open()` no working without the `<input>` in Firefox */}
+      <input {...getInputProps()} />
+      <LoadingButton
+        variant="outlined"
+        size="small"
+        onClick={open}
+        startIcon={<FileDownloadIcon />}
+        loadingPosition="start"
+        loading={isUploading}
+        disabled={disabled}
+      >
+        {label}
+      </LoadingButton>
+    </>
   );
 }