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 {