fix(radio): fix radio not showing checked state when not in a group (#24423)

core/src/components/radio/radio.tsx

@@ -22,6 +22,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 export class Radio implements ComponentInterface {
   private inputId = `ion-rb-${radioButtonIds++}`;
   private radioGroup: HTMLIonRadioGroupElement | null = null;
+  private nativeInput!: HTMLInputElement;
 
   @Element() el!: HTMLIonRadioElement;
 
@@ -128,6 +129,10 @@ export class Radio implements ComponentInterface {
     }
   }
 
+  private onClick = () => {
+    this.checked = this.nativeInput.checked;
+  };
+
   private onFocus = () => {
     this.ionFocus.emit();
   }
@@ -150,6 +155,7 @@ export class Radio implements ComponentInterface {
         tabindex={buttonTabindex}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
+        onClick={this.onClick}
         class={createColorClasses(color, {
           [mode]: true,
           'in-item': hostContext('ion-item', el),
@@ -171,6 +177,7 @@ export class Radio implements ComponentInterface {
           disabled={disabled}
           tabindex="-1"
           id={inputId}
+          ref={el => this.nativeInput = el as HTMLInputElement}
         />
       </Host>
     );

core/src/components/radio/test/basic/e2e.ts

@@ -7,6 +7,14 @@ test('radio: basic', async () => {
 
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
+
+  const groupedRadio = await page.find('#groupedRadio');
+  await groupedRadio.click();
+  expect(groupedRadio).toHaveClass('radio-checked');
+
+  const ungroupedRadio = await page.find('#ungroupedRadio');
+  await ungroupedRadio.click();
+  expect(ungroupedRadio).toHaveClass('radio-checked');
 });
 
 test('radio:rtl: basic', async () => {

core/src/components/radio/test/basic/index.html

@@ -27,7 +27,7 @@
           </ion-item-divider>
           <ion-item>
             <ion-label>Pepperoni</ion-label>
-            <ion-radio slot="start" value="pepperoni"></ion-radio>
+            <ion-radio slot="start" value="pepperoni" id="groupedRadio"></ion-radio>
           </ion-item>
 
           <ion-item>
@@ -137,7 +137,7 @@
         </ion-list-header>
         <ion-item>
           <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
-          <ion-radio slot="start" color="secondary"></ion-radio>
+          <ion-radio slot="start" color="secondary" id="ungroupedRadio"></ion-radio>
         </ion-item>
 
         <ion-item>