inactive file selector (#1533)

* inactive file selector
resolves #1532

* fix test

* fix test

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/src/components/Taipy/FileSelector.spec.tsx

@@ -34,7 +34,7 @@ describe("FileSelector Component", () => {
     it("displays the right info for string", async () => {
         const { getByText } = render(<FileSelector label="toto" defaultLabel="titi" className="taipy-file-selector" />);
         const elt = getByText("toto");
-        expect(elt.parentElement).toHaveClass("taipy-file-selector");
+        expect(elt.parentElement?.parentElement).toHaveClass("taipy-file-selector");
     });
     it("displays the default value", async () => {
         const { getByText } = render(<FileSelector defaultLabel="titi" label={undefined as unknown as string} />);
@@ -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" />);
@@ -66,7 +67,7 @@ describe("FileSelector Component", () => {
             </TaipyContext.Provider>,
         );
         const elt = getByText("FileSelector");
-        const inputElt = elt.parentElement?.querySelector("input");
+        const inputElt = elt.parentElement?.parentElement?.querySelector("input");
         expect(inputElt).toBeInTheDocument();
         inputElt && (await userEvent.upload(inputElt, file));
         expect(dispatch).toHaveBeenCalledWith({
@@ -79,7 +80,7 @@ describe("FileSelector Component", () => {
         const file = new File(["(⌐□_□)"], "chucknorris2.png", { type: "image/png" });
         const { getByRole, getByText } = render(<FileSelector label="FileSelectorDrop" />);
         const elt = getByRole("button");
-        const inputElt = elt.parentElement?.querySelector("input");
+        const inputElt = elt.parentElement?.parentElement?.querySelector("input");
         expect(inputElt).toBeInTheDocument();
         waitFor(() => getByText("Drop here to Upload"));
         inputElt &&
@@ -95,7 +96,7 @@ describe("FileSelector Component", () => {
             <FileSelector label="FileSelectorDrop" dropMessage="drop here those files" />,
         );
         const elt = getByRole("button");
-        const inputElt = elt.parentElement?.querySelector("input");
+        const inputElt = elt.parentElement?.parentElement?.querySelector("input");
         expect(inputElt).toBeInTheDocument();
         waitFor(() => getByText("drop here those files"));
         inputElt &&

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>