Fix ToggleGroup disabled handling

This commit is contained in:
Mats Bosson 2026-03-29 07:57:25 +07:00
parent 40e57715f9
commit 315f5e4ae2
2 changed files with 14 additions and 2 deletions

View File

@ -24,8 +24,10 @@ export function ToggleGroupItem(props: ToggleGroupItemProps): JSX.Element {
disabled={isDisabled()} disabled={isDisabled()}
{...rest} {...rest}
onClick={(e) => { onClick={(e) => {
if (!isDisabled()) {
if (typeof rest.onClick === "function") rest.onClick(e); if (typeof rest.onClick === "function") rest.onClick(e);
if (!isDisabled()) ctx.onItemPress(local.value); ctx.onItemPress(local.value);
}
}} }}
> >
{local.children} {local.children}

View File

@ -71,4 +71,14 @@ describe("ToggleGroup multiple", () => {
fireEvent.click(screen.getByRole("button")); fireEvent.click(screen.getByRole("button"));
expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe("false"); expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe("false");
}); });
it("disabled item is not pressable", () => {
render(() => (
<ToggleGroup type="single">
<ToggleGroup.Item value="a" disabled>A</ToggleGroup.Item>
</ToggleGroup>
));
fireEvent.click(screen.getByRole("button"));
expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe("false");
});
}); });