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 87628774f91..376e8fdac76 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 @@ -458,15 +458,15 @@ describe("calcite-radio-button-group", () => { expect(changeEvent).toHaveReceivedEventTimes(0); await firstRadio.click(); - expect(changeEvent).toHaveReceivedEventTimes(1); + expect(changeEvent).toHaveReceivedEventTimes(0); expect(await getSelectedItemValue()).toBe("one"); await secondRadio.click(); - expect(changeEvent).toHaveReceivedEventTimes(2); + expect(changeEvent).toHaveReceivedEventTimes(1); expect(await getSelectedItemValue()).toBe("two"); await thirdRadio.click(); - expect(changeEvent).toHaveReceivedEventTimes(3); + expect(changeEvent).toHaveReceivedEventTimes(2); expect(await getSelectedItemValue()).toBe("three"); }); diff --git a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts index d71b8e85ffa..2c6ec4317f9 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts +++ b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts @@ -10,6 +10,7 @@ import { reflects, renders } from "../../tests/commonTests"; +import { html } from "../../../support/formatting"; describe("calcite-radio-button", () => { describe("renders", () => { @@ -184,6 +185,33 @@ describe("calcite-radio-button", () => { expect(value).toBe("1"); }); + it("should not emit calciteRadioButtonChange when checked already", async () => { + const page = await newE2EPage(); + await page.setContent(html` + + + Trees + + + + Shrubs + + `); + + const checkedRadio = await page.find("calcite-radio-button[checked]"); + expect(await checkedRadio.getProperty("checked")).toBe(true); + + const changeEvent = await checkedRadio.spyOnEvent("calciteRadioButtonChange"); + + expect(changeEvent).toHaveReceivedEventTimes(0); + + await checkedRadio.click(); + await page.waitForChanges(); + expect(await checkedRadio.getProperty("checked")).toBe(true); + + expect(changeEvent).toHaveReceivedEventTimes(0); + }); + it("clicking a radio updates its checked status", async () => { const page = await newE2EPage(); await page.setContent(` diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index f91f42fa86d..beef04e3f75 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -188,11 +188,17 @@ export class RadioButton if (this.disabled) { return; } + + this.focused = true; + this.setFocus(); + + if (this.checked) { + return; + } + this.uncheckAllRadioButtonsInGroup(); this.checked = true; - this.focused = true; this.calciteRadioButtonChange.emit(); - this.setFocus(); }; private clickHandler = (): void => { @@ -204,25 +210,34 @@ export class RadioButton }; onLabelClick(event: CustomEvent): void { - if (!this.disabled && !this.hidden) { - this.uncheckOtherRadioButtonsInGroup(); - const label = event.currentTarget as HTMLCalciteLabelElement; - const radioButton = label.for - ? this.rootNode.querySelector( - `calcite-radio-button[id="${label.for}"]` - ) - : label.querySelector( - `calcite-radio-button[name="${this.name}"]` - ); - - if (radioButton) { - radioButton.checked = true; - radioButton.focused = true; - } + if (this.disabled || this.hidden) { + return; + } - this.calciteRadioButtonChange.emit(); - this.setFocus(); + const label = event.currentTarget as HTMLCalciteLabelElement; + + const radioButton = label.for + ? this.rootNode.querySelector( + `calcite-radio-button[id="${label.for}"]` + ) + : label.querySelector( + `calcite-radio-button[name="${this.name}"]` + ); + + if (!radioButton) { + return; + } + + radioButton.focused = true; + this.setFocus(); + + if (radioButton.checked) { + return; } + + this.uncheckOtherRadioButtonsInGroup(); + radioButton.checked = true; + this.calciteRadioButtonChange.emit(); } private checkLastRadioButton(): void {