From 180fb6921ef4368d76492838317e946386680d6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?=
 <Fred.Lefevere-Laoide@Taipy.io>
Date: Tue, 16 Jul 2024 23:42:04 +0200
Subject: [PATCH] inactive file selector resolves #1532

---
 .../components/Taipy/FileSelector.spec.tsx    |  1 +
 .../src/components/Taipy/FileSelector.tsx     | 41 ++++++++++---------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/FileSelector.spec.tsx b/frontend/taipy-gui/src/components/Taipy/FileSelector.spec.tsx
index 9d38e5b5ef..9fd8e4abbe 100644
--- a/frontend/taipy-gui/src/components/Taipy/FileSelector.spec.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/FileSelector.spec.tsx
@@ -44,6 +44,7 @@ describe("FileSelector Component", () => {
         const { getByText } = render(<FileSelector label="val" active={false} />);
         const elt = getByText("val");
         expect(elt).toHaveClass("Mui-disabled");
+        expect(elt.parentElement?.parentElement?.querySelector("input")).toBeDisabled();
     });
     it("is enabled by default", async () => {
         const { getByText } = render(<FileSelector label="val" />);
diff --git a/frontend/taipy-gui/src/components/Taipy/FileSelector.tsx b/frontend/taipy-gui/src/components/Taipy/FileSelector.tsx
index faf1026148..a36028e0b4 100644
--- a/frontend/taipy-gui/src/components/Taipy/FileSelector.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/FileSelector.tsx
@@ -78,25 +78,25 @@ const FileSelector = (props: FileSelectorProps) => {
                         onAction && dispatch(createSendActionNameAction(id, module, onAction));
                         notify &&
                             dispatch(
-                                createAlertAction({ atype: "success", message: value, system: false, duration: 3000 }),
+                                createAlertAction({ atype: "success", message: value, system: false, duration: 3000 })
                             );
                     },
                     (reason) => {
                         setUpload(false);
                         notify &&
                             dispatch(
-                                createAlertAction({ atype: "error", message: reason, system: false, duration: 3000 }),
+                                createAlertAction({ atype: "error", message: reason, system: false, duration: 3000 })
                             );
-                    },
+                    }
                 );
             }
         },
-        [state.id, id, onAction, notify, updateVarName, dispatch, module],
+        [state.id, id, onAction, notify, updateVarName, dispatch, module]
     );
 
     const handleChange = useCallback(
         (e: ChangeEvent<HTMLInputElement>) => handleFiles(e.target.files, e),
-        [handleFiles],
+        [handleFiles]
     );
 
     const handleDrop = useCallback(
@@ -105,7 +105,7 @@ const FileSelector = (props: FileSelectorProps) => {
             setDropSx(defaultSx);
             handleFiles(e.dataTransfer?.files, e);
         },
-        [handleFiles],
+        [handleFiles]
     );
 
     const handleDragLeave = useCallback(() => {
@@ -118,12 +118,12 @@ const FileSelector = (props: FileSelectorProps) => {
             console.log(evt);
             const target = evt.currentTarget as HTMLElement;
             setDropSx((sx) =>
-                sx.minWidth === defaultSx.minWidth && target ? { minWidth: target.clientWidth + "px" } : sx,
+                sx.minWidth === defaultSx.minWidth && target ? { minWidth: target.clientWidth + "px" } : sx
             );
             setDropLabel(dropMessage);
             handleDragOver(evt);
         },
-        [dropMessage],
+        [dropMessage]
     );
 
     useEffect(() => {
@@ -153,19 +153,22 @@ const FileSelector = (props: FileSelectorProps) => {
                 accept={extensions}
                 multiple={multiple}
                 onChange={handleChange}
+                disabled={!active || upload}
             />
             <Tooltip title={hover || ""}>
-                <Button
-                    id={id}
-                    component="span"
-                    aria-label="upload"
-                    variant="outlined"
-                    disabled={!active || upload}
-                    sx={dropSx}
-                    ref={butRef}
-                >
-                    <UploadFile /> {dropLabel || label || defaultLabel}
-                </Button>
+                <span>
+                    <Button
+                        id={id}
+                        component="span"
+                        aria-label="upload"
+                        variant="outlined"
+                        disabled={!active || upload}
+                        sx={dropSx}
+                        ref={butRef}
+                    >
+                        <UploadFile /> {dropLabel || label || defaultLabel}
+                    </Button>
+                </span>
             </Tooltip>
             {upload ? <LinearProgress value={progress} /> : null}
         </label>