Skip to content

Commit

Permalink
fix(radio-button-group): remove blank clickable space outside of label (
Browse files Browse the repository at this point in the history
#9793)

**Related Issue:**
[#6703](#6703)

## Summary
Updates `radio-button-group` to trigger clicks only when clicking on a
radio button or its label text.
  • Loading branch information
aPreciado88 authored and github-actions[bot] committed Jul 30, 2024
1 parent 0babfc8 commit 4cc24a0
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,37 @@ describe("calcite-radio-button-group", () => {
expect(await second.getProperty("checked")).toBe(false);
});

it("clicking outside of radio button or label text won't update checked status", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-radio-button-group name="radio" layout="vertical">
<calcite-label>
1
<calcite-radio-button id="first" value="one"></calcite-radio-button>
</calcite-label>
<calcite-label>
2
<calcite-radio-button id="second" value="two" checked></calcite-radio-button>
</calcite-label>
</calcite-radio-button-group>
`);

const first = await page.find("calcite-radio-button#first");
const second = await page.find("calcite-radio-button#second");

await page.mouse.click(0, 0);
await page.waitForChanges();

expect(await first.getProperty("checked")).toBe(false);
expect(await second.getProperty("checked")).toBe(true);

await page.mouse.click(10, 10);
await page.waitForChanges();

expect(await first.getProperty("checked")).toBe(true);
expect(await second.getProperty("checked")).toBe(false);
});

it("programmatically checking a radio button updates the group's state correctly", async () => {
const page = await newE2EPage();
await page.setContent(html`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@

:host([layout="vertical"]) > .item-wrapper {
@apply flex-col;
inline-size: fit-content;
}

:host([scale="s"]) calcite-input-message {
Expand Down

0 comments on commit 4cc24a0

Please sign in to comment.