Ionic-framework: [4.0.0-beta.13] ion-reorder-group/ion-reorder: buggy list after item is dropped

[GillesMontyne]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.10.2
   @angular-devkit/schematics    : 7.0.2
   @angular/cli                  : 7.0.2
   @ionic/angular-toolkit        : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.2.5, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 11 other plugins)

System:

   ios-deploy : 2.0.0
   ios-sim    : 7.0.0
   NodeJS     : v10.12.0 (/usr/local/Cellar/node/9.11.1/bin/node)
   npm        : 6.4.1
   OS         : macOS
   Xcode      : Xcode 10.0 Build version 10A255

Describe the Bug
When I drag an element and drop it (within the ) the view gets messed up/buggy.

_Before interaction:_

_After (drag &) dropping an item:_

Steps to Reproduce
Steps to reproduce the behavior:

1. make basic re-ordable list
2. drag & drop an item
3. See messed up list view

NO ERRORS ARE THROWN DURING THESE ACTIONS

Related Code
html code:

<ion-content>
  <ion-list>
        <ion-list-header>
            <ion-label>INCLUDE</ion-label>
        </ion-list-header>
        <ion-reorder-group (ionItemReorder)="reorder($event)" [disabled]="false">
            <ion-item *ngFor="let accessory of accessories">
                <ion-label>{{accessory}}</ion-label>
                <ion-reorder></ion-reorder>
            </ion-item>
        </ion-reorder-group>
   </ion-list>
</ion-content>

typescript code:

 accessories = ['test', 'test1', 'test2'];

reorder(event) {
        const itemToMove = this.accessories.splice(event.detail.from, 1)[0];
        this.accessories.splice(event.detail.to, 0, itemToMove);
    }

Expected Behavior
no messed up view

[chopstickqy]

i face the same issue with use broswer to test the feature.

after i drag & drop

and the items can't dragged anymore

[MarkChrisLevy]

@gentleen @GillesMontyne You have to complete reordering by calling complete on ReorderGroup instance. Read the docs:
https://github.com/ionic-team/ionic/tree/master/core/src/components/reorder-group

Once the data structure has been updated to reflect the reorder change, the complete() method must be called. This method finishes the reorder operation and resets all the CSS transforms applied by the ion-reorder-group component.

[GillesMontyne]

thx, this solved my issue!

[TrayserCassa]

@mmlleevvyy

@gentleen @GillesMontyne You have to complete reordering by calling complete on ReorderGroup instance. Read the docs:
https://github.com/ionic-team/ionic/tree/master/core/src/components/reorder-group

Once the data structure has been updated to reflect the reorder change, the complete() method must be called. This method finishes the reorder operation and resets all the CSS transforms applied by the ion-reorder-group component.

Should this not moved to the ionic Doku beta page?

[MarkChrisLevy]

@TrayserCassa It should and I guess that it will be... but can't tell why it is not present in docs website. @brandyscarney ?

[brandyscarney]

We will have the API documentation updated soon. It hasn't been deployed since beta.11 so it is out of sync with the current API reference. I created an issue for the description being cut off: https://github.com/ionic-team/ionic-docs/issues/160

In the future if you see any issues with documentation (outdated, incomplete, etc.) please create an issue on the ionic-docs repository. Thank you!

[yuricamara]

Hi @brandyscarney!

The example in the doc is freezing when the element is dropped. The page says 4.0.0-beta.15.

[emgould]

Same here. I get an error: reorder node not found and it freezes. This is on a page that is routed to from a tab. I did notice that the page also fails to fire an ionViewDidLoad event as well which is another issue already reported but it is possible that is related here.

beta16 does not show the error message but the item still freezes upon release of the drag.

[emgould]

Resolved. Add implements OnInit to my page component. Then added the reorder event listener. All good now.

[TrayserCassa]

@yuricamara

Zitat:
In the future if you see any issues with documentation (outdated, incomplete, etc.) please create an issue on the ionic-docs repository. Thank you!

This is the wrong issue tracker for doc errors ...

[yuricamara]

@TrayserCassa , thank you for your advice but this was NOT about doc. I was talking about an official example by chance in the doc.

[brandyscarney]

Thanks @yuricamara! I added a comment for that in the issue that I created on the docs site since it's an issue with the demo code and not the ionic source: https://github.com/ionic-team/ionic-docs/issues/160

We'll look into getting that fixed!

[yuricamara]

Thanks, @brandyscarney

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.