From a6b8c090262ef173eb9d88161ba5051c31e2f930 Mon Sep 17 00:00:00 2001
From: Carlos Guerra <CarlosEGuerraSilva@hotmail.com>
Date: Tue, 13 Feb 2024 19:17:46 -0600
Subject: [PATCH] fix(labs): update tabIndex once the element is connected to
 the DOM

Fix for #5398 , when hydrating tabIndex on radios and tabs, it causes a DOMException. The proposed solution suggests moving the hasConstructed property and calling the updateTabIndex method in the connectedCallback to be able to modify the tabIndex as soon as the element is connected to the DOM
---
 labs/behaviors/focusable.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/labs/behaviors/focusable.ts b/labs/behaviors/focusable.ts
index 0449edce49..98466d36b2 100644
--- a/labs/behaviors/focusable.ts
+++ b/labs/behaviors/focusable.ts
@@ -77,10 +77,12 @@ export function mixinFocusable<T extends MixinBase<LitElement>>(
     constructor(...args: any[]) {
       super(...args);
       this[isFocusable] = true;
-      queueMicrotask(() => {
-        this[hasConstructed] = true;
-        this[updateTabIndex]();
-      });
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this[hasConstructed] = true;
+      this[updateTabIndex]();
     }
 
     override attributeChangedCallback(