From 688ab3cf5f12ddbff07407910b8e8e158b3282d7 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Tue, 5 Aug 2025 09:45:36 -0700 Subject: [PATCH] fix(radio): stack overflow error when rendering many radios PiperOrigin-RevId: 791255859 --- radio/internal/single-selection-controller.ts | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/radio/internal/single-selection-controller.ts b/radio/internal/single-selection-controller.ts index 57630cb567..052dc3057a 100644 --- a/radio/internal/single-selection-controller.ts +++ b/radio/internal/single-selection-controller.ts @@ -84,17 +84,29 @@ export class SingleSelectionController implements ReactiveController { this.uncheckSiblings(); } - // Update for the newly added host. - this.updateTabIndices(); + // Update siblings after a microtask to allow other synchronous connected + // callbacks to settle before triggering additional Lit updates. This avoids + // stack overflow issues when too many elements are being rendered and + // connected at the same time. + queueMicrotask(() => { + // Update for the newly added host. + this.updateTabIndices(); + }); } hostDisconnected() { this.host.removeEventListener('keydown', this.handleKeyDown); this.host.removeEventListener('focusin', this.handleFocusIn); this.host.removeEventListener('focusout', this.handleFocusOut); - // Update for siblings that are still connected. - this.updateTabIndices(); - this.root = null; + // Update siblings after a microtask to allow other synchronous disconnected + // callbacks to settle before triggering additional Lit updates. This avoids + // stack overflow issues when too many elements are being rendered and + // connected at the same time. + queueMicrotask(() => { + // Update for siblings that are still connected. + this.updateTabIndices(); + this.root = null; + }); } /**