Skip to content

Commit 682a17e

Browse files
authored
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.
1 parent 70b1237 commit 682a17e

File tree

3 files changed

+3
-13
lines changed

3 files changed

+3
-13
lines changed

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ ion-radio-group {
88
vertical-align: top;
99
}
1010

11-
.radio-group-wrapper {
12-
display: inline;
13-
}
14-
1511
// Radio Group: Top
1612
// --------------------------------------------------
1713

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -353,14 +353,7 @@ export class RadioGroup implements ComponentInterface {
353353
class={mode}
354354
>
355355
{this.renderHintText()}
356-
{/*
357-
TODO(FW-6279): Wrapping the slot in a div is a workaround due to a
358-
Stencil issue. Without the wrapper, the children radio will fire the
359-
blur event on focus, instead of waiting for them to be blurred.
360-
*/}
361-
<div class="radio-group-wrapper">
362-
<slot></slot>
363-
</div>
356+
<slot></slot>
364357
</Host>
365358
);
366359
}

core/stencil.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,8 @@ export const config: Config = {
226226
dest: 'components',
227227
warn: true
228228
}],
229-
includeGlobalScripts: false
229+
includeGlobalScripts: false,
230+
externalRuntime: false,
230231
},
231232
{
232233
type: 'docs-json',

0 commit comments

Comments
 (0)