fix(radio): updates the tabindex when a radio is added or removed

core/src/components.d.ts

@@ -3098,6 +3098,7 @@ export namespace Components {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        "updateRadiosTabindex": () => Promise<void>;
         /**
           * the value of the radio group.
          */

core/src/components/radio-group/radio-group.tsx

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
 import { checkInvalidState } from '@utils/forms';
-import { renderHiddenInput } from '@utils/helpers';
+import { debounce, renderHiddenInput } from '@utils/helpers';
 import { hostContext } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
@@ -110,6 +110,15 @@ export class RadioGroup implements ComponentInterface {
     this.valueChanged(this.value);
   }
 
+  /** @internal - Recompute which radio has tabindex 0. Call when radios are added/removed. */
+  @Method()
+  async updateRadiosTabindex() {
+    this.scheduleTabindexUpdate();
+  }
+
+  /** Ensures that the tabindex update is debounced and only called once. */
+  private scheduleTabindexUpdate = debounce(() => this.setRadioTabindex(this.value), 0);
+
   private setRadioTabindex = (value: any | undefined) => {
     const radios = this.getRadios();
 

core/src/components/radio/radio.tsx

@@ -151,13 +151,15 @@ export class Radio implements ComponentInterface {
     if (radioGroup) {
       this.updateState();
       addEventListener(radioGroup, 'ionValueChange', this.updateState);
+      radioGroup.updateRadiosTabindex();
     }
   }
 
   disconnectedCallback() {
     const radioGroup = this.radioGroup;
     if (radioGroup) {
       removeEventListener(radioGroup, 'ionValueChange', this.updateState);
+      radioGroup.updateRadiosTabindex();
       this.radioGroup = null;
     }
   }