From 682a17ebb754da7714989623cf84b75e715e20e1 Mon Sep 17 00:00:00 2001
From: OS-jacobbell <228905018+OS-jacobbell@users.noreply.github.com>
Date: Thu, 19 Feb 2026 10:03:48 -0700
Subject: [PATCH] fix(radio-group): prevent DOMException and NotFoundError when
 filtering radios (#30958)

resolves #30279 resolves #30359

## What is the current behavior?
While Ionic's `stencil.config.ts` sets `experimentalSlotFixes: true`,
the fixes never get applied at runtime. Ionic is using an external
runtime, so Ionic components import `defineCustomElement` from
`@stencil/core/internal/client` at runtime and this code has no
awareness of the project's stencil configuration.

This leads to a `NotFoundError` (Failed to execute 'removeChild' on
'Node') when filtering or dynamically removing radios in an
`ion-radio-group`. The error occurs because `ion-radio-group` wraps its
slotted content in an internal `<div>`.

## What is the new behavior?
By setting `externalRuntime: false`, Stencil generates a
project-specific file with `defineCustomElement` that components import.
This file has the project's build settings baked in, correctly applying
slot fixes.

Additionally, the internal wrapper `<div>` around the slotted content in
`ion-radio-group` is removed. With slot fixes correctly applied and the
wrapper removed, radios can be filtered or dynamically removed without
triggering `NotFoundError` or `DOMExceptions`.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information
External Runtime is enabled by default and designed for projects that
import Stencil components from multiple sources. This is flawed because
those components will not be running with the runtime settings for which
they were made.
---
 core/src/components/radio-group/radio-group.scss | 4 ----
 core/src/components/radio-group/radio-group.tsx  | 9 +--------
 core/stencil.config.ts                           | 3 ++-
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/core/src/components/radio-group/radio-group.scss b/core/src/components/radio-group/radio-group.scss
index 3eceab4405..817db37c4e 100644
--- a/core/src/components/radio-group/radio-group.scss
+++ b/core/src/components/radio-group/radio-group.scss
@@ -8,10 +8,6 @@ ion-radio-group {
   vertical-align: top;
 }
 
-.radio-group-wrapper {
-  display: inline;
-}
-
 // Radio Group: Top
 // --------------------------------------------------
 
diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
index e060c2c720..88ff48e2c4 100644
--- a/core/src/components/radio-group/radio-group.tsx
+++ b/core/src/components/radio-group/radio-group.tsx
@@ -353,14 +353,7 @@ export class RadioGroup implements ComponentInterface {
         class={mode}
       >
         {this.renderHintText()}
-        {/*
-          TODO(FW-6279): Wrapping the slot in a div is a workaround due to a
-          Stencil issue. Without the wrapper, the children radio will fire the
-          blur event on focus, instead of waiting for them to be blurred.
-        */}
-        <div class="radio-group-wrapper">
-          <slot></slot>
-        </div>
+        <slot></slot>
       </Host>
     );
   }
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index f5f824e29a..1e457e264c 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -226,7 +226,8 @@ export const config: Config = {
         dest: 'components',
         warn: true
       }],
-      includeGlobalScripts: false
+      includeGlobalScripts: false,
+      externalRuntime: false,
     },
     {
       type: 'docs-json',