test(angular): add radio group test to reproduce blur issue

Author: brandyscarney

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -21,6 +21,7 @@ export const routes: Routes = [
       { path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) },
       { path: 'reorder-group', loadComponent: () => import('../reorder-group/reorder-group.component').then(c => c.ReorderGroupComponent) },
       { path: 'icon', loadComponent: () => import('../icon/icon.component').then(c => c.IconComponent) },
+      { path: 'radio-group', loadComponent: () => import('../radio-group/radio-group.component').then(c => c.RadioGroupComponent) },
       { path: 'split-pane', redirectTo: '/standalone/split-pane/inbox', pathMatch: 'full' },
       {
         path: 'split-pane',

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -32,6 +32,10 @@
       <ion-label>
         Reorder Group Test
       </ion-label>
+    <ion-item routerLink="/standalone/radio-group">
+      <ion-label>
+        Radio Group Test
+      </ion-label>
     </ion-item>
   </ion-list>
 

packages/angular/test/base/src/app/standalone/radio-group/radio-group.component.ts

@@ -0,0 +1,64 @@
+import { Component } from "@angular/core";
+import { IonItem, IonLabel, IonList, IonListHeader, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-radio-group',
+  template: `
+    <ion-list>
+      <ion-list-header>
+        <ion-label>Static Radio Group</ion-label>
+      </ion-list-header>
+      <ion-radio-group>
+        <ion-item>
+          <ion-radio (ionBlur)="onBlur($event)" (ionFocus)="onFocus($event)" value="one">Item 1</ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-radio (ionBlur)="onBlur($event)" (ionFocus)="onFocus($event)" value="two">Item 2</ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-radio (ionBlur)="onBlur($event)" (ionFocus)="onFocus($event)" value="three">Item 3</ion-radio>
+        </ion-item>
+      </ion-radio-group>
+
+      <ion-list-header>
+        <ion-label>Dynamic Radio Group</ion-label>
+      </ion-list-header>
+      <ion-radio-group>
+        @for (item of items; track item.value) {
+          <ion-item>
+            <ion-radio (ionBlur)="onBlur($event)" (ionFocus)="onFocus($event)" [value]="item.value">{{item.text}}</ion-radio>
+          </ion-item>
+        }
+      </ion-radio-group>
+    </ion-list>`,
+  standalone: true,
+  imports: [IonItem, IonLabel, IonList, IonListHeader, IonRadio, IonRadioGroup]
+})
+export class RadioGroupComponent {
+  items: { text: string; value: string }[] = [];
+
+  ionViewWillEnter() {
+    this.items = [
+      {
+        text: 'Item 1',
+        value: 'item-1'
+      },
+      {
+        text: 'Item 2',
+        value: 'item-2'
+      },
+      {
+        text: 'Item 3',
+        value: 'item-3'
+      }
+    ];
+  }
+
+  onBlur(event: any) {
+    console.log('ionBlur', event);
+  }
+
+  onFocus(event: any) {
+    console.log('ionFocus', event);
+  }
+}