diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.e2e.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.e2e.ts index 0944a369c0c..d064c8f2856 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.e2e.ts +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.e2e.ts @@ -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` + + + 1 + + + + 2 + + + + `); + + 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` diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss index 62d1727b333..60fbe67744c 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss @@ -25,6 +25,7 @@ :host([layout="vertical"]) > .item-wrapper { @apply flex-col; + inline-size: fit-content; } :host([scale="s"]) calcite-input-message {