diff --git a/core/src/components.d.ts b/core/src/components.d.ts index b6521a11bd9..10900d3b0ee 100644 --- a/core/src/components.d.ts +++ b/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; /** * the value of the radio group. */ diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index ab9ce1579cf..bab52d596ed 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/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(); diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index 5ca4bb8cf01..225ac4f7099 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -151,6 +151,7 @@ export class Radio implements ComponentInterface { if (radioGroup) { this.updateState(); addEventListener(radioGroup, 'ionValueChange', this.updateState); + radioGroup.updateRadiosTabindex(); } } @@ -158,6 +159,7 @@ export class Radio implements ComponentInterface { const radioGroup = this.radioGroup; if (radioGroup) { removeEventListener(radioGroup, 'ionValueChange', this.updateState); + radioGroup.updateRadiosTabindex(); this.radioGroup = null; } }