Fix Selector Height for Radio/Check Mode (#2425)

* Use getWindowHeight to set the height and make the selector scrollable

* Fixed the behavior when height is not defined

* Add height test for check and radio mode.

* Use useMemo for the height

* Add nowrap to the styling and updated unit tests.

* Removed extra line

* Replaced single quotes with double quotes. Use undefined instead of {}

---------

Co-authored-by: Fred Lefévère-Laoide <[email protected]>

Author: Satoshi-Sh

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

@@ -328,6 +328,13 @@ describe("Selector Component", () => {
             await userEvent.click(elt);
             expect(elt.parentElement?.querySelector("span.Mui-checked")).not.toBeNull();
         });
+        it("sets the correct height for the radio mode", async () => {
+            const height = "200px";
+            const { getByRole } = render(<Selector lov={lov} mode="radio" height={height} />);
+            const selector = getByRole("radiogroup");
+            const style = window.getComputedStyle(selector);
+            expect(style.maxHeight).toBe(height);
+          });
     });
 
     describe("Selector Component check mode", () => {
@@ -366,4 +373,11 @@ describe("Selector Component", () => {
             expect(elt3.parentElement?.querySelector("span.Mui-checked")).not.toBeNull();
         });
     });
+    it("sets the correct height for the check mode", async () => {
+        const height = "200px";
+        const { container } = render(<Selector lov={lov} mode="check" height={height} />);
+        const selector = container.querySelector(".MuiFormGroup-root");
+        const style = window.getComputedStyle(selector!);
+        expect(style.maxHeight).toBe(height);
+      });
 });

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

@@ -178,6 +178,18 @@ const Selector = (props: SelectorProps) => {
         }),
         [width]
     );
+    const heightSx = useMemo(() => {
+        if (!height) {
+            return undefined;
+        }
+        return {
+            maxHeight: height,
+            display: 'flex',
+            flexFlow: 'column nowrap',
+            overflowY: "auto",
+        };
+    }, [height]);
+
     const paperSx = useMemo(() => {
         let sx = paperBaseSx;
         if (height !== undefined) {
@@ -371,6 +383,7 @@ const Selector = (props: SelectorProps) => {
                                 value={dropdownValue}
                                 onChange={handleChange}
                                 className={getSuffixedClassNames(className, "-radio-group")}
+                                sx={heightSx}
                             >
                                 {lovList.map((item) => (
                                     <FormControlLabel
@@ -390,7 +403,7 @@ const Selector = (props: SelectorProps) => {
                                 ))}
                             </RadioGroup>
                         ) : (
-                            <FormGroup className={getSuffixedClassNames(className, "-check-group")}>
+                            <FormGroup className={getSuffixedClassNames(className, "-check-group")} sx={heightSx}>
                                 {lovList.map((item) => (
                                     <FormControlLabel
                                         key={item.id}