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) => (