Ionic-framework: [Ionic 4.0.0-beta.13] <ion-reorder-group> not working for <ion-item-sliding> with <ion-item-options>

[conorseed]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[X] 4.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Current behavior:
A list of <ion-item-sliding> refuses to reorder when <ion-reorder> element is placed within the required <ion-item> element of an <ion-item-sliding>, with an <ion-item-options> element present within the same <ion-item-sliding>.

Expected behavior:
Should be able to drag+drop to reorder <ion-item-sliding> with <ion-item-options>.

Steps to reproduce:
Use this code, try and re-order list. The first two items with be moveable. The third won't be. Once you've tried to move the third item, all of the items will then be non-movable.

<ion-list lines="full">
      <ion-reorder-group disabled="false" (ionItemReorder)="moveChecklist($event)">

      <ion-item-sliding>
        <ion-item href="/" routerDirection="forward" detail>
          <ion-reorder slot="start"></ion-reorder>
          <ion-label text-wrap>
            <h2>Moveable</h2>
          </ion-label>
        </ion-item>
      </ion-item-sliding>

      <ion-item-sliding>
          <ion-item href="/" routerDirection="forward" detail>
            <ion-reorder slot="start"></ion-reorder>
            <ion-label text-wrap>
              <h2>Moveable</h2>
            </ion-label>
          </ion-item>
        </ion-item-sliding>

      <ion-item-sliding>
        <ion-item detail>
          <ion-reorder slot="start"></ion-reorder>
          <ion-label text-wrap>
            <h2>Non moveable (ion-item-options present)</h2>
          </ion-label>
        </ion-item>
        <ion-item-options side="end">
            <ion-item-option color="light">
              <ion-icon name="clipboard" slot="top"></ion-icon>
            </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>

    </ion-reorder-group>
  </ion-list>

moveChecklist(e): void{
    e.detail.complete();
  }

Related code:
See above

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

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.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : not installed

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.8
   @capacitor/core           : 1.0.0-beta.8

System:

   NodeJS : v8.12.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS High Sierra

[thetabguy]

I've got the same issue. Has anyone found a workaround for the time being?

[mixuala]

I've got the same issue. here's the "fix":

npm install @ionic/[email protected]

[Majed93]

Still an issue in beta.16

[hcassar93]

Can confirm. Still issue in beta.16

[hanechris]

Trying to get reorder working with beta16 ionic4.

The API preview doesn’t work either: https://beta.ionicframework.com/docs/api/reorder-group/ 1

When dragging a row, the drop doesn’t render correctly or allow for further drag/drop.

I’m executing this in chrome on Windows 10.

[Anthony2539]

I have the same issue in 4.0.0-rc.0

[saridakis]

The same here ... 4.0.0-rc.0. The drop doesn't render correctly and allow no further drag/drop.

[rampantlion103]

The same here ... 4.0.0-rc.1 The drop doesn't render correctly and allow no further drag/drop.

[sxynull]

The same here ... 4.0.0-rc.1 The drop doesn't render correctly and allow no further drag/drop.

[LucasGuarnieri]

In the complete event add your array list in the parameter.
like this:

moveChecklist(e): void { this.items = e.detail.complete(this.items); }

The method reorder your array list.

[sbannigan]

Any update on this issue? @LucasGuarnieri's solution does not fix the problem of not being able to reorder list items that use ion-item-sliding and ion-item-options. I'm assuming that something is going on with the event handlers for the sliding gesture that is blocking the reorder gesture.

[sbannigan]

Just opened a PR for this issue (#17568)

[liamdebeasi]

Hello!

Thanks for the issue! This has been resolved via #17568. It will be in the next release. Please let us know if you are still seeing problems after that.

[JoabChua]

Is this release available already? Still facing issue with ion-reorder-group with ion-item-sliding. Unable to reorder items.

ionic (Ionic CLI) : 4.12.0
Ionic Framework : @ionic/angular 4.0.2

[sbannigan]

@JoabChua this was fixed in 4.1.0 which has already been released.

[JoabChua]

I am seeing my gesturePriority in my node_module files still remains at 90. Am I missing out anything when I updated my ionic project?

[liamdebeasi]

Hi @JoabChua,

Please update to the latest @ionic/angular and @ionic/core. A fix for this issue was released in 4.1.0.

Thanks!

[JoabChua]

Alright. Got it resolved by upgrading my @ionic/angular package from 4.0.2 to 4.1.1. My bad for overlooking this.

[JoabChua]

By the way I found this issue. After I reorder my array, I am unable to slide and show my ion-item-option. Is anyone facing this issue as well ? Also, is the reorderArray method available in @ionic/angular ? Saw it in the documentation but cant seem to import it.

[liamdebeasi]

Hi there,

If you feel you have found a bug, please open a new issue for it here. Thanks!

[alperbalkaya]

By the way I found this issue. After I reorder my array, I am unable to slide and show my ion-item-option. Is anyone facing this issue as well ? Also, is the reorderArray method available in @ionic/angular ? Saw it in the documentation but cant seem to import it.

Have the same problem, created a new issue https://github.com/ionic-team/ionic/issues/17890

[toze100]

I've this issue solved, by reloading the list, that is biding with the *ngFor.
Here the HTML:

    <ion-list>
      <ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
        <ion-item-sliding *ngFor="let item of lista">

          <ion-item-options side="start">
            <ion-button color="primary" (click)="selectItem(item)">
              <ion-icon slot="icon-only" name="create"></ion-icon>
            </ion-button>
          </ion-item-options>

          <ion-item-options side="end">
            <ion-button color="danger" (click)="deleteObj(item)">
              <ion-icon slot="icon-only" name="trash"></ion-icon>
            </ion-button>
          </ion-item-options>

          <ion-item>
            <ion-label>{{item.qtd}} - {{item.nome}}</ion-label>
            <ion-reorder></ion-reorder>
          </ion-item>

        </ion-item-sliding>
      </ion-reorder-group>

and this is the related home.page.ts:

// this.lista represents an array of objects, something like:
export interface Objecto {
  id: number;
  nome: string;
  qtd: number;
}

reorderItems(ev: any) {
    console.log('Evento: ', ev);
    // this is not really necessary...
    if (ev.type !== 'ionItemReorder') {
      ev.detail.complete();
      return null;
    } else {
      // BUT this is fundamental (and I found out that the .complete() method actually 
      // reorders the array
      this.lista = ev.detail.complete(this.lista);
     // It is fundamental that you use this Promise here, since you can't get the array 
     // correctly updated otherwise
     // lstServ is  a service injected, that uses Storage to persist data.
      this.lstServ.updateLista(this.lista).then(() => {
        this.loadObjects(); // THIS IS WHAT MADE MY SOLUTION WORK FOR ME!!!
      });
    }
  }

and the method updateLista():

  updateLista(lista: Objecto[]): Promise<Objecto[]> {
    return this.storage.set(ITEMS_KEY, lista);

  }

and getObjectos():

  getObjectos(): Promise<Objecto[]> {
    return this.storage.get(ITEMS_KEY).then((lista) => {
      if (lista) {
        return lista;
      } else {
        return this.storage.set(ITEMS_KEY, []);
      }

    });
  }

and to complete the flow:

  loadObjects(): Promise<any> {
    return this.lstServ.getObjectos().then((lst) => {
      // console.log(lst);
      this.lista = lst;
      this.numberItems = lst.length;
    });
  }

I hope you can solve your issues, as I solved mine.
Greetings.

By the way, this is my ionic INFO:
Ionic:

ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.1.2
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.6
@ionic/angular-toolkit : 1.4.1

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (1 plugins total)

System:

Android SDK Tools : 26.1.1 (/###/Android/Sdk)
NodeJS : v11.2.0 (/usr/local/bin/node)
npm : 6.9.0
OS : Linux 4.15

[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.