ionItemReorder event not triggering

Ionic Framework Ionic Vue
1

I just made a new Ionic 8 Vue app and tried the ion-reorder-group component, but the ionItemReorder event is not triggering and the animation freezes (because i cant do the event.detail.complete()).

I am just using the basic example: ion-reorder: Drag and Drop Icon to Reorder Items

Screenshot 2025-02-18 at 17.28.37
Screenshot 2025-02-18 at 17.28.37470Ă—220 2.62 KB

1 Like
2

Ionic Vue 8.4.3 event handlers are broken. Revert to 8.4.2 until a fix is released.

1 Like
3

Does not work for me. I started with 8.0, went to the latest version and tested 8.4.2 now, but nothing works.

4

You’ll have to show more code. And verify that you installed npm packages after updating the version to 8.4.2.
If you go to the docs and click on the :zap: for stackblitz sample, it is working there. And I forked that and converted it to script setup and it still works and fires the event.detail.complete(). Here’s my fork:

1 Like
5

I really just went do Vue QuickStart Global Component for Generating Ionic Vue Apps, created a new app and copy pasted the basic example of the reorder component: ion-reorder: Drag and Drop Icon to Reorder Items. I am not new with Vue/Ionic and i really dont know whats the issue here.

The package json when installing a new project with the CLI looks like this:

{
  "name": "reorder-new-test",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "test:e2e": "cypress run",
    "test:unit": "vitest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@capacitor/app": "7.0.0",
    "@capacitor/core": "7.0.1",
    "@capacitor/haptics": "7.0.0",
    "@capacitor/keyboard": "7.0.0",
    "@capacitor/status-bar": "7.0.0",
    "@ionic/vue": "^8.0.0",
    "@ionic/vue-router": "^8.0.0",
    "ionicons": "^7.0.0",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@capacitor/cli": "7.0.1",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "terser": "^5.4.0",
    "typescript": "~5.6.2",
    "vite": "~5.2.0",
    "vitest": "^0.34.6",
    "vue-tsc": "^2.1.10"
  },
  "description": "An Ionic project"
}

I also tested it with 8.4.2 and installed the depencies again. The event doesnt get logged as well, so i am not getting the event triggered.

6

Did you try using “8.4.2” as the version in package.json? That will pull ONLY 8.4.2. This is called pinning the version. If you use “^8.4.2” (with the caret) you will actually get the latest minor update which is 8.4.3.
Sorry if you already know this. Just checking the base assumptions.

7

Omg, thats embarrassing now haha. I forgot about that… Thank you so much, it of course works now.

1 Like
9

Sorry, but did you read the conversation? I tried the basic example from ionic and in there, the @ionItemReorder event and handleReorder function, but the event didnt get triggered. And your last part of your comment ist repeating, what dolthead said. Next to that, you are sharing a weird link… I dont know about this one

10

So does that safely tell us that Ionic does not actually have automated testing even at the most basic level for each of their components?

Thanks for the info I didnt realize part of my app was broken that I released the other week, so I was able to downgrade and all is good now.

11

The fix has been released in 8.5.1. I would get that latest version for other new component attributes.