ionItemReorder event not triggering

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

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

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

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

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.

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.

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

1 Like

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