fix(radio): checked state is updated when value changes (#26936)

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

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);
+  });
 });