fix(reorder-group): update children to __children

Author: brandyscarney

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

@@ -6,6 +6,7 @@ import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
+import type { HTMLStencilElement } from '../../utils/element-interface';
 
 import type { ItemReorderEventDetail, ReorderMoveEventDetail, ReorderEndEventDetail } from './reorder-group-interface';
 
@@ -38,7 +39,7 @@ export class ReorderGroup implements ComponentInterface {
 
   @State() state = ReorderGroupState.Idle;
 
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLStencilElement;
 
   /**
    * If `true`, the reorder will be hidden.
@@ -152,7 +153,7 @@ export class ReorderGroup implements ComponentInterface {
     const heights = this.cachedHeights;
     heights.length = 0;
     const el = this.el;
-    const children: any = el.children;
+    const children: any = el.__children;
     if (!children || children.length === 0) {
       return;
     }
@@ -258,7 +259,7 @@ export class ReorderGroup implements ComponentInterface {
   private completeReorder(listOrReorder?: boolean | any[]): any {
     const selectedItemEl = this.selectedItemEl;
     if (selectedItemEl && this.state === ReorderGroupState.Complete) {
-      const children = this.el.children as any;
+      const children: any = this.el.__children;
       const len = children.length;
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
@@ -308,7 +309,7 @@ export class ReorderGroup implements ComponentInterface {
   /********* DOM WRITE ********* */
   private reorderMove(fromIndex: number, toIndex: number) {
     const itemHeight = this.selectedItemHeight;
-    const children = this.el.children;
+    const children: any = this.el.__children;
     for (let i = 0; i < children.length; i++) {
       const style = (children[i] as any).style;
       let value = '';

core/src/components/router/utils/interface.ts

@@ -1,10 +1,6 @@
-import type { AnimationBuilder, ComponentProps } from '../../../interface';
+import type { AnimationBuilder, ComponentProps, HTMLStencilElement } from '../../../interface';
 import type { NavigationHookCallback } from '../../route/route-interface';
 
-export interface HTMLStencilElement extends HTMLElement {
-  componentOnReady(): Promise<this>;
-}
-
 export interface NavOutlet {
   setRouteId(
     id: string,

core/src/interface.d.ts

@@ -23,7 +23,7 @@ export { PickerOptions, PickerColumnOption } from './components/picker-legacy/pi
 export { PopoverOptions } from './components/popover/popover-interface';
 export { RadioGroupCustomEvent } from './components/radio-group/radio-group-interface';
 export { RangeCustomEvent, PinFormatter } from './components/range/range-interface';
-export { HTMLStencilElement, RouterCustomEvent } from './components/router/utils/interface';
+export { RouterCustomEvent } from './components/router/utils/interface';
 export { RefresherCustomEvent } from './components/refresher/refresher-interface';
 export {
   ItemReorderCustomEvent,
@@ -49,6 +49,7 @@ export {
   AnimationKeyFrames,
   AnimationLifecycle,
 } from './utils/animation/animation-interface';
+export { HTMLStencilElement } from './utils/element-interface';
 export { TransitionOptions } from './utils/transition';
 export { HTMLIonOverlayElement, OverlayController, OverlayInterface } from './utils/overlays-interface';
 export { Config, config } from './global/config';

core/src/utils/element-interface.ts

@@ -1,6 +1,19 @@
 // The interfaces in this file are used to make sure our components
 // have the correct properties defined that are needed to pass to
-// the native HTML elements they render
+// the native HTML elements they render. The HTMLStencilElement interface
+// extends HTMLElement to provide Stencil-specific functionality like
+// componentOnReady() and proper children handling.
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+  /**
+   * Stencil patches `el.children` to behave like calling `el.children` on an
+   * element with shadow DOM even though the component is not a shadow DOM element.
+   * To allow components to work properly we need to access the original accessor
+   * for this property which is `__children`.
+   */
+  __children?: HTMLCollection;
+}
 
 export interface AnchorInterface {
   href: string | undefined;