diff --git a/core/src/components/buttons/buttons.tsx b/core/src/components/buttons/buttons.tsx index e826ec7633..7cf672d7bd 100644 --- a/core/src/components/buttons/buttons.tsx +++ b/core/src/components/buttons/buttons.tsx @@ -34,7 +34,9 @@ export class Buttons implements ComponentInterface { [mode]: true, ['buttons-collapse']: this.collapse, }} - > + > + + ); } } diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx index 1cfe88ffb7..6f8ad05a4a 100644 --- a/core/src/components/label/label.tsx +++ b/core/src/components/label/label.tsx @@ -107,7 +107,9 @@ export class Label implements ComponentInterface { [`label-no-animate`]: this.noAnimate, 'label-rtl': document.dir === 'rtl', })} - > + > + + ); } } diff --git a/core/src/utils/slot-mutation-controller.ts b/core/src/utils/slot-mutation-controller.ts index 3827c28f9f..c07f2da5f2 100644 --- a/core/src/utils/slot-mutation-controller.ts +++ b/core/src/utils/slot-mutation-controller.ts @@ -50,6 +50,18 @@ export const createSlotMutationController = ( hostMutationObserver.observe(el, { childList: true, + /** + * This fixes an issue with the `ion-input` and + * `ion-textarea` not re-rendering in some cases + * when using the label slot functionality. + * + * HTML element patches in Stencil that are enabled + * by the `experimentalSlotFixes` flag in Stencil v4 + * result in DOM manipulations that won't trigger + * the current mutation observer configuration and + * callback. + */ + subtree: true, }); } diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 78a3697a07..2485eafb23 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -257,4 +257,18 @@ export const config: Config = { globalScript: 'src/global/ionic-global.ts', enableCache: true, transformAliasedImportPaths: true, + extras: { + /** + * `experimentalSlotFixes` is necessary in Stencil v4 until the fixes described in + * {@link https://stenciljs.com/docs/config-extras#experimentalslotfixes the Stencil docs for the flag} are the + * default behavior (slated for a future Stencil major version). + */ + experimentalSlotFixes: true, + /** + * `experimentalScopedSlotChanges` is necessary in Stencil v4 until the fixes described in + * {@link https://stenciljs.com/docs/config-extras#experimentalscopedslotchanges the Stencil docs for the flag} are + * the default behavior (slated for a future Stencil major version). + */ + experimentalScopedSlotChanges: true, + } };