Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Selector Height for Radio/Check Mode #2425

Merged
merged 8 commits into from
Jan 27, 2025
Merged

Fix Selector Height for Radio/Check Mode #2425

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2b41f83
Use getWindowHeight to set the height and make the selector scrollable
Satoshi-Sh Jan 22, 2025
e5ceaad
Fixed the behavior when height is not defined
Satoshi-Sh Jan 22, 2025
057f4c9
Add height test for check and radio mode.
Satoshi-Sh Jan 22, 2025
6e9737b
Use useMemo for the height
Satoshi-Sh Jan 23, 2025
dc3286a
Add nowrap to the styling and updated unit tests.
Satoshi-Sh Jan 23, 2025
0b9b38b
Removed extra line
Satoshi-Sh Jan 23, 2025
0bf2189
Merge branch 'develop' into fix/#2409-fix-mode-radio
FredLL-Avaiga Jan 24, 2025
bf968b5
Replaced single quotes with double quotes. Use undefined instead of {}
Satoshi-Sh Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions frontend/taipy-gui/src/components/Taipy/Selector.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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);
});
});
15 changes: 14 additions & 1 deletion frontend/taipy-gui/src/components/Taipy/Selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,18 @@ const Selector = (props: SelectorProps) => {
}),
[width]
);
const heightSx = useMemo(() => {
if (!height) {
return {};
FredLL-Avaiga marked this conversation as resolved.
Show resolved Hide resolved
}
return {
maxHeight: height,
display: 'flex',
flexFlow: 'column nowrap',
overflowY: "auto",
};
}, [height]);

const paperSx = useMemo(() => {
let sx = paperBaseSx;
if (height !== undefined) {
Expand Down Expand Up @@ -371,6 +383,7 @@ const Selector = (props: SelectorProps) => {
value={dropdownValue}
onChange={handleChange}
className={getSuffixedClassNames(className, "-radio-group")}
sx={heightSx}
>
{lovList.map((item) => (
<FormControlLabel
Expand All @@ -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}
Expand Down
Loading