remove unused stack

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

@@ -12,62 +12,62 @@
  */
 
 import React from "react";
-import {render, waitFor} from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import userEvent from "@testing-library/user-event";
 
 import Input from "./Input";
-import {TaipyContext} from "../../context/taipyContext";
-import {TaipyState, INITIAL_STATE} from "../../context/taipyReducers";
+import { TaipyContext } from "../../context/taipyContext";
+import { TaipyState, INITIAL_STATE } from "../../context/taipyReducers";
 
 describe("Input Component", () => {
     it("renders", async () => {
-        const {getByDisplayValue} = render(<Input type="text" value="toto"/>);
+        const { getByDisplayValue } = render(<Input type="text" value="toto" />);
         const elt = getByDisplayValue("toto");
         expect(elt.tagName).toBe("INPUT");
     });
     it("displays the right info for string", async () => {
-        const {getByDisplayValue} = render(
-            <Input value="toto" type="text" defaultValue="titi" className="taipy-input"/>
+        const { getByDisplayValue } = render(
+            <Input value="toto" type="text" defaultValue="titi" className="taipy-input" />,
         );
         const elt = getByDisplayValue("toto");
         expect(elt.parentElement?.parentElement).toHaveClass("taipy-input");
     });
     it("displays the default value", async () => {
-        const {getByDisplayValue} = render(
-            <Input defaultValue="titi" value={undefined as unknown as string} type="text"/>
+        const { getByDisplayValue } = render(
+            <Input defaultValue="titi" value={undefined as unknown as string} type="text" />,
         );
         getByDisplayValue("titi");
     });
     it("is disabled", async () => {
-        const {getByDisplayValue} = render(<Input value="val" type="text" active={false}/>);
+        const { getByDisplayValue } = render(<Input value="val" type="text" active={false} />);
         const elt = getByDisplayValue("val");
         expect(elt).toBeDisabled();
     });
     it("is enabled by default", async () => {
-        const {getByDisplayValue} = render(<Input value="val" type="text"/>);
+        const { getByDisplayValue } = render(<Input value="val" type="text" />);
         const elt = getByDisplayValue("val");
         expect(elt).not.toBeDisabled();
     });
     it("is enabled by active", async () => {
-        const {getByDisplayValue} = render(<Input value="val" type="text" active={true}/>);
+        const { getByDisplayValue } = render(<Input value="val" type="text" active={true} />);
         const elt = getByDisplayValue("val");
         expect(elt).not.toBeDisabled();
     });
     it("dispatch a well formed message", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;
-        const {getByDisplayValue} = render(
-            <TaipyContext.Provider value={{state, dispatch}}>
-                <Input value="Val" type="text" updateVarName="varname"/>
-            </TaipyContext.Provider>
+        const { getByDisplayValue } = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
+                <Input value="Val" type="text" updateVarName="varname" />
+            </TaipyContext.Provider>,
         );
         const elt = getByDisplayValue("Val");
         await userEvent.clear(elt);
         await waitFor(() => expect(dispatch).toHaveBeenCalled());
         expect(dispatch).toHaveBeenLastCalledWith({
             name: "varname",
-            payload: {value: ""},
+            payload: { value: "" },
             propagate: true,
             type: "SEND_UPDATE_ACTION",
         });
@@ -75,10 +75,10 @@ describe("Input Component", () => {
     it("dispatch a well formed message on enter", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;
-        const {getByDisplayValue} = render(
-            <TaipyContext.Provider value={{state, dispatch}}>
-                <Input value="Val" type="text" updateVarName="varname" onAction="on_action"/>
-            </TaipyContext.Provider>
+        const { getByDisplayValue } = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
+                <Input value="Val" type="text" updateVarName="varname" onAction="on_action" />
+            </TaipyContext.Provider>,
         );
         const elt = getByDisplayValue("Val");
         await userEvent.click(elt);
@@ -86,17 +86,17 @@ describe("Input Component", () => {
         await waitFor(() => expect(dispatch).toHaveBeenCalled());
         expect(dispatch).toHaveBeenLastCalledWith({
             name: "",
-            payload: {action: "on_action", args: ["Enter", "varname", "Valdata"]},
+            payload: { action: "on_action", args: ["Enter", "varname", "Valdata"] },
             type: "SEND_ACTION_ACTION",
         });
     });
     it("dispatch a well formed update message with change_delay=-1", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;
-        const {getByDisplayValue} = render(
-            <TaipyContext.Provider value={{state, dispatch}}>
-                <Input value="Val" type="text" updateVarName="varname" changeDelay={-1}/>
-            </TaipyContext.Provider>
+        const { getByDisplayValue } = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
+                <Input value="Val" type="text" updateVarName="varname" changeDelay={-1} />
+            </TaipyContext.Provider>,
         );
         const elt = getByDisplayValue("Val");
         await userEvent.click(elt);
@@ -104,7 +104,7 @@ describe("Input Component", () => {
         await waitFor(() => expect(dispatch).toHaveBeenCalled());
         expect(dispatch).toHaveBeenLastCalledWith({
             name: "varname",
-            payload: {value: "Valdata"},
+            payload: { value: "Valdata" },
             propagate: true,
             type: "SEND_UPDATE_ACTION",
         });
@@ -112,10 +112,10 @@ describe("Input Component", () => {
     it("dispatch a no action message on unsupported key", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;
-        const {getByDisplayValue} = render(
-            <TaipyContext.Provider value={{state, dispatch}}>
-                <Input value="Val" type="text" updateVarName="varname" onAction="on_action"/>
-            </TaipyContext.Provider>
+        const { getByDisplayValue } = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
+                <Input value="Val" type="text" updateVarName="varname" onAction="on_action" />
+            </TaipyContext.Provider>,
         );
         const elt = getByDisplayValue("Val");
         await userEvent.click(elt);
@@ -123,7 +123,7 @@ describe("Input Component", () => {
         await waitFor(() => expect(dispatch).toHaveBeenCalled());
         expect(dispatch).toHaveBeenLastCalledWith({
             name: "varname",
-            payload: {value: "Valdata"},
+            payload: { value: "Valdata" },
             propagate: true,
             type: "SEND_UPDATE_ACTION",
         });
@@ -132,45 +132,45 @@ describe("Input Component", () => {
 
 describe("Number Component", () => {
     it("renders", async () => {
-        const {getByDisplayValue} = render(<Input type="number" value="12"/>);
+        const { getByDisplayValue } = render(<Input type="number" value="12" />);
         const elt = getByDisplayValue("12");
         expect(elt.tagName).toBe("INPUT");
     });
     it("displays the right info for string", async () => {
-        const {getByDisplayValue} = render(
-            <Input value="12" type="number" defaultValue="1" className="taipy-number"/>
+        const { getByDisplayValue } = render(
+            <Input value="12" type="number" defaultValue="1" className="taipy-number" />,
         );
         const elt = getByDisplayValue(12);
         expect(elt.parentElement?.parentElement).toHaveClass("taipy-number");
     });
     it("displays the default value", async () => {
-        const {getByDisplayValue} = render(
-            <Input defaultValue="1" value={undefined as unknown as string} type="number"/>
+        const { getByDisplayValue } = render(
+            <Input defaultValue="1" value={undefined as unknown as string} type="number" />,
         );
         getByDisplayValue("1");
     });
     it("is disabled", async () => {
-        const {getByDisplayValue} = render(<Input value={"33"} type="number" active={false}/>);
+        const { getByDisplayValue } = render(<Input value={"33"} type="number" active={false} />);
         const elt = getByDisplayValue("33");
         expect(elt).toBeDisabled();
     });
     it("is enabled by default", async () => {
-        const {getByDisplayValue} = render(<Input value={"33"} type="number"/>);
+        const { getByDisplayValue } = render(<Input value={"33"} type="number" />);
         const elt = getByDisplayValue("33");
         expect(elt).not.toBeDisabled();
     });
     it("is enabled by active", async () => {
-        const {getByDisplayValue} = render(<Input value={"33"} type="number" active={true}/>);
+        const { getByDisplayValue } = render(<Input value={"33"} type="number" active={true} />);
         const elt = getByDisplayValue("33");
         expect(elt).not.toBeDisabled();
     });
     it("dispatch a well formed message", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;
-        const {getByDisplayValue} = render(
-            <TaipyContext.Provider value={{state, dispatch}}>
-                <Input value={"33"} type="number" updateVarName="varname"/>
-            </TaipyContext.Provider>
+        const { getByDisplayValue } = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
+                <Input value={"33"} type="number" updateVarName="varname" />
+            </TaipyContext.Provider>,
         );
         const elt = getByDisplayValue("33");
         await userEvent.clear(elt);
@@ -178,14 +178,14 @@ describe("Number Component", () => {
         await waitFor(() => expect(dispatch).toHaveBeenCalled());
         expect(dispatch).toHaveBeenLastCalledWith({
             name: "varname",
-            payload: {value: "666"},
+            payload: { value: "666" },
             propagate: true,
             type: "SEND_UPDATE_ACTION",
         });
     });
     xit("shows 0", async () => {
         //not working cf. https://github.com/testing-library/user-event/issues/1066
-        const {getByDisplayValue, rerender} = render(<Input value={"0"} type="number"/>);
+        const { getByDisplayValue, rerender } = render(<Input value={"0"} type="number" />);
         const elt = getByDisplayValue("0") as HTMLInputElement;
         expect(elt).toBeInTheDocument();
         await userEvent.type(elt, "{ArrowUp}");
@@ -194,66 +194,66 @@ describe("Number Component", () => {
         expect(elt.value).toBe("0");
     });
     it("Validates increment by step value on up click", async () => {
-        const {getByDisplayValue, getByTestId} = render(<Input value={"0"} type="number" step={2}/>);
+        const { getByDisplayValue, getByTestId } = render(<Input value={"0"} type="number" step={2} />);
         const upSpinner = getByTestId("stepper-up-spinner");
         const elt = getByDisplayValue("0") as HTMLInputElement;
         await userEvent.click(upSpinner);
         expect(elt.value).toBe("2");
-    })
+    });
     it("Validates decrement by step value on down click", async () => {
-        const {getByDisplayValue, getByTestId} = render(<Input value={"0"} type="number" step={2}/>);
+        const { getByDisplayValue, getByTestId } = render(<Input value={"0"} type="number" step={2} />);
         const downSpinner = getByTestId("stepper-down-spinner");
         const elt = getByDisplayValue("0") as HTMLInputElement;
         await userEvent.click(downSpinner);
         expect(elt.value).toBe("-2");
-    })
+    });
     it("Validates increment when holding shift key and clicking up", async () => {
         const user = userEvent.setup();
-        const {getByDisplayValue, getByTestId} = render(<Input value={"0"} type="number" step={2}/>);
+        const { getByDisplayValue, getByTestId } = render(<Input value={"0"} type="number" step={2} />);
         const upSpinner = getByTestId("stepper-up-spinner");
         const elt = getByDisplayValue("0") as HTMLInputElement;
-        await user.keyboard('[ShiftLeft>]');
+        await user.keyboard("[ShiftLeft>]");
         await user.click(upSpinner);
         expect(elt.value).toBe("20");
-    })
+    });
     it("Validates decrement when holding shift key and clicking down", async () => {
         const user = userEvent.setup();
-        const {getByDisplayValue, getByTestId} = render(<Input value={"0"} type="number" step={2}/>);
+        const { getByDisplayValue, getByTestId } = render(<Input value={"0"} type="number" step={2} />);
         const downSpinner = getByTestId("stepper-down-spinner");
         const elt = getByDisplayValue("0") as HTMLInputElement;
-        await user.keyboard('[ShiftLeft>]');
+        await user.keyboard("[ShiftLeft>]");
         await user.click(downSpinner);
         expect(elt.value).toBe("-20");
-    })
+    });
     it("Validate increment when holding shift key and arrow up", async () => {
         const user = userEvent.setup();
-        const {getByDisplayValue} = render(<Input value={"0"} type="number" step={2}/>);
+        const { getByDisplayValue } = render(<Input value={"0"} type="number" step={2} />);
         const elt = getByDisplayValue("0") as HTMLInputElement;
         await user.click(elt);
-        await user.keyboard('[ShiftLeft>]');
-        await user.keyboard('[ArrowUp]');
+        await user.keyboard("[ShiftLeft>]");
+        await user.keyboard("[ArrowUp]");
         expect(elt.value).toBe("20");
-    })
+    });
     it("Validate value when reaching max value", async () => {
         const user = userEvent.setup();
-        const {getByDisplayValue} = render(<Input value={"0"} type="number" step={2} max={20}/>);
+        const { getByDisplayValue } = render(<Input value={"0"} type="number" step={2} max={20} />);
         const elt = getByDisplayValue("0") as HTMLInputElement;
         await user.click(elt);
-        await user.keyboard('[ShiftLeft>]');
+        await user.keyboard("[ShiftLeft>]");
         // Press the arrow up twice to validate that the value will not exceed the maximum value when reached
-        await user.keyboard('[ArrowUp]');
-        await user.keyboard('[ArrowUp]');
-        expect(elt.value).toBe("20")
-    })
+        await user.keyboard("[ArrowUp]");
+        await user.keyboard("[ArrowUp]");
+        expect(elt.value).toBe("20");
+    });
     it("Validate value when reaching min value", async () => {
         const user = userEvent.setup();
-        const {getByDisplayValue} = render(<Input value={"20"} type="number" step={2} min={0}/>);
+        const { getByDisplayValue } = render(<Input value={"20"} type="number" step={2} min={0} />);
         const elt = getByDisplayValue("20") as HTMLInputElement;
         await user.click(elt);
-        await user.keyboard('[ShiftLeft>]');
+        await user.keyboard("[ShiftLeft>]");
         // Press the arrow up twice to validate that the value will not exceed the minimum value when reached
-        await user.keyboard('[ArrowDown]');
-        await user.keyboard('[ArrowDown]');
-        expect(elt.value).toBe("0")
-    })
+        await user.keyboard("[ArrowDown]");
+        await user.keyboard("[ArrowDown]");
+        expect(elt.value).toBe("0");
+    });
 });

frontend/taipy-gui/src/components/Taipy/Input.tsx

@@ -14,7 +14,6 @@
 import React, { useState, useEffect, useCallback, useRef, KeyboardEvent, useMemo } from "react";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
-import Stack from "@mui/material/Stack";
 import IconButton from "@mui/material/IconButton";
 import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";