diff --git a/frontend/taipy-gui/src/components/Taipy/Selector.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Selector.spec.tsx index c142923f8..ca463176f 100644 --- a/frontend/taipy-gui/src/components/Taipy/Selector.spec.tsx +++ b/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(); + 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(); + const selector = container.querySelector(".MuiFormGroup-root"); + const style = window.getComputedStyle(selector!); + expect(style.maxHeight).toBe(height); + }); }); diff --git a/frontend/taipy-gui/src/components/Taipy/Selector.tsx b/frontend/taipy-gui/src/components/Taipy/Selector.tsx index 421ffbc0c..5c59f3380 100644 --- a/frontend/taipy-gui/src/components/Taipy/Selector.tsx +++ b/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) => ( { ))} ) : ( - + {lovList.map((item) => (