From 27a5356fa2b72073d565e9d6f527107869faa3ee Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 9 Mar 2023 11:56:58 -0500
Subject: [PATCH] fix(radio): checked state is updated when value changes
 (#26936)

---
 core/src/components/radio/radio.tsx          | 10 +++++++++
 core/src/components/radio/test/radio.spec.ts | 22 ++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index 373c5f03a0..f153b54f0b 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -60,6 +60,16 @@ export class Radio implements ComponentInterface {
    */
   @Prop() value?: any | null;
 
+  @Watch('value')
+  valueChanged() {
+    /**
+     * The new value of the radio may
+     * match the radio group's value,
+     * so we see if it should be checked.
+     */
+    this.updateState();
+  }
+
   /**
    * Emitted when the styles change.
    * @internal
diff --git a/core/src/components/radio/test/radio.spec.ts b/core/src/components/radio/test/radio.spec.ts
index 4cd981805b..88b4547109 100644
--- a/core/src/components/radio/test/radio.spec.ts
+++ b/core/src/components/radio/test/radio.spec.ts
@@ -1,4 +1,6 @@
 import { Radio } from '../radio.tsx';
+import { RadioGroup } from '../../radio-group/radio-group.tsx';
+import { newSpecPage } from '@stencil/core/testing';
 
 describe('ion-radio', () => {
   it('should set a default value', async () => {
@@ -8,4 +10,24 @@ describe('ion-radio', () => {
 
     expect(radio.value).toEqual('ion-rb-0');
   });
+
+  it('should update the checked state when updating the value', async () => {
+    const page = await newSpecPage({
+      components: [Radio, RadioGroup],
+      html: `
+        <ion-radio-group value="a">
+          <ion-radio value="other-value"></ion-radio>
+        </ion-radio-group>
+      `,
+    });
+
+    const radio = page.root.querySelector('ion-radio');
+    expect(radio.classList.contains('radio-checked')).toBe(false);
+
+    radio.value = 'a';
+
+    await page.waitForChanges();
+
+    expect(radio.classList.contains('radio-checked')).toBe(true);
+  });
 });