diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index c9deba6f205..918beebd99a 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -153,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 || el.children; if (!children || children.length === 0) { return; } @@ -259,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: any = this.el.__children; + const children: any = this.el.__children || this.el.children; const len = children.length; const toIndex = this.lastToIndex; const fromIndex = indexForItem(selectedItemEl); @@ -309,7 +309,7 @@ export class ReorderGroup implements ComponentInterface { /********* DOM WRITE ********* */ private reorderMove(fromIndex: number, toIndex: number) { const itemHeight = this.selectedItemHeight; - const children: any = this.el.__children; + const children: any = this.el.__children || this.el.children; for (let i = 0; i < children.length; i++) { const style = (children[i] as any).style; let value = ''; diff --git a/packages/angular/test/base/e2e/src/standalone/reorder-group.spec.ts b/packages/angular/test/base/e2e/src/standalone/reorder-group.spec.ts new file mode 100644 index 00000000000..094d912d09a --- /dev/null +++ b/packages/angular/test/base/e2e/src/standalone/reorder-group.spec.ts @@ -0,0 +1,25 @@ +import { expect } from '@playwright/test'; +import { test } from '@playwright/test'; +import { dragElementBy } from '../../utils/drag-utils'; + +test.describe('reorder-group: angular standalone', () => { + test('should reorder the items', async ({ page }) => { + await page.goto('/standalone/reorder-group'); + + // Get initial order + const initialItems = await page.locator('ion-item').allTextContents(); + expect(initialItems).toEqual(['Item 1', 'Item 2', 'Item 3']); + + const reorderGroup = page.locator('ion-reorder-group'); + + // Drag the first item down to move it to the end (below Item 3) + await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 300); + + // Wait for the reorder to complete + await page.waitForTimeout(500); + + // Verify the new order - Item 1 should now be at the end + const finalItems = await page.locator('ion-item').allTextContents(); + expect(finalItems).toEqual(['Item 2', 'Item 3', 'Item 1']); + }); +}); diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts index 8b267987ebd..ae6ee66193c 100644 --- a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts +++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts @@ -19,6 +19,7 @@ export const routes: Routes = [ { path: 'providers', loadComponent: () => import('../providers/providers.component').then(c => c.ProvidersComponent) }, { path: 'overlay-controllers', loadComponent: () => import('../overlay-controllers/overlay-controllers.component').then(c => c.OverlayControllersComponent) }, { path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) }, + { path: 'reorder-group', loadComponent: () => import('../reorder-group/reorder-group.component').then(c => c.ReorderGroupComponent) }, { path: 'icon', loadComponent: () => import('../icon/icon.component').then(c => c.IconComponent) }, { path: 'split-pane', redirectTo: '/standalone/split-pane/inbox', pathMatch: 'full' }, { diff --git a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html index cc99a1439da..163e438d42c 100644 --- a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html +++ b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html @@ -28,6 +28,11 @@ Icon Test + + + Reorder Group Test + + diff --git a/packages/angular/test/base/src/app/standalone/reorder-group/reorder-group.component.ts b/packages/angular/test/base/src/app/standalone/reorder-group/reorder-group.component.ts new file mode 100644 index 00000000000..528ee343022 --- /dev/null +++ b/packages/angular/test/base/src/app/standalone/reorder-group/reorder-group.component.ts @@ -0,0 +1,36 @@ +import { Component } from "@angular/core"; +import { IonItem, IonLabel, IonReorder, IonReorderGroup } from '@ionic/angular/standalone'; +import { ReorderEndCustomEvent } from "@ionic/angular"; + +@Component({ + selector: 'app-reorder-group', + template: ` + + + + Item 1 + + + + Item 2 + + + + Item 3 + + + `, + standalone: true, + imports: [IonItem, IonLabel, IonReorder, IonReorderGroup] +}) +export class ReorderGroupComponent { + onReorderEnd(event: ReorderEndCustomEvent) { + if (event.detail.from !== event.detail.to) { + console.log('ionReorderEnd: Dragged from index', event.detail.from, 'to', event.detail.to); + } else { + console.log('ionReorderEnd: No position change occurred'); + } + + event.detail.complete(); + } +} diff --git a/packages/react/test/base/src/App.tsx b/packages/react/test/base/src/App.tsx index 291acf7524f..475e4fdcd76 100644 --- a/packages/react/test/base/src/App.tsx +++ b/packages/react/test/base/src/App.tsx @@ -36,6 +36,7 @@ import IonPopoverNested from './pages/overlay-components/IonPopoverNested'; import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted'; import OverlayComponents from './pages/overlay-components/OverlayComponents'; import OverlayHooks from './pages/overlay-hooks/OverlayHooks'; +import ReorderGroup from './pages/ReorderGroup'; setupIonicReact(); @@ -67,6 +68,7 @@ const App: React.FC = () => ( + diff --git a/packages/react/test/base/src/pages/Main.tsx b/packages/react/test/base/src/pages/Main.tsx index 5595c0d6307..d7fc30c3767 100644 --- a/packages/react/test/base/src/pages/Main.tsx +++ b/packages/react/test/base/src/pages/Main.tsx @@ -46,6 +46,9 @@ const Main: React.FC = () => { Inputs + + Reorder Group + diff --git a/packages/react/test/base/src/pages/ReorderGroup.tsx b/packages/react/test/base/src/pages/ReorderGroup.tsx new file mode 100644 index 00000000000..29dc50273b4 --- /dev/null +++ b/packages/react/test/base/src/pages/ReorderGroup.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { + IonBackButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonPage, + IonReorder, + IonReorderGroup, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import type { ReorderEndCustomEvent } from '@ionic/react'; + +const ReorderGroup: React.FC = () => { + const onReorderEnd = (event: ReorderEndCustomEvent) => { + if (event.detail.from !== event.detail.to) { + console.log('ionReorderEnd: Dragged from index', event.detail.from, 'to', event.detail.to); + } else { + console.log('ionReorderEnd: No position change occurred'); + } + + event.detail.complete(); + }; + + return ( + + + + + + + Reorder Group + + + + + + + Item 1 + + + + Item 2 + + + + Item 3 + + + + + ); +}; + +export default ReorderGroup; diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts index 5e344988313..13d4e919ad6 100644 --- a/packages/vue/test/base/src/router/index.ts +++ b/packages/vue/test/base/src/router/index.ts @@ -86,6 +86,10 @@ const routes: Array = [ path: '/components/range', component: () => import('@/views/Range.vue') }, + { + path: '/reorder-group', + component: () => import('@/views/ReorderGroup.vue') + }, { path: '/nested', component: () => import('@/views/RouterOutlet.vue'), diff --git a/packages/vue/test/base/src/views/Home.vue b/packages/vue/test/base/src/views/Home.vue index 853832bd8c6..d4d88e61a3f 100644 --- a/packages/vue/test/base/src/views/Home.vue +++ b/packages/vue/test/base/src/views/Home.vue @@ -29,6 +29,9 @@ Navigation + + Reorder Group + Routing diff --git a/packages/vue/test/base/src/views/ReorderGroup.vue b/packages/vue/test/base/src/views/ReorderGroup.vue new file mode 100644 index 00000000000..48ccab650ec --- /dev/null +++ b/packages/vue/test/base/src/views/ReorderGroup.vue @@ -0,0 +1,78 @@ + + +