Can`t slide ion-item-option after reorder ion-item

[alperbalkaya]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

If an <ion-item-sliding> is dragged down in <ion-list>, it is possible to slide <ion-item-options>. But if the item is dragged up in the list, sliding is no longer possible.

Expected behavior:

Sliding should still be possible if the item is dragged up in the list

Steps to reproduce:
See gif above

Related code:

<ion-list>
  <ion-reorder-group (ionItemReorder)="reorderConfigurationsList($event)" disabled="false">
    <ion-item-sliding *ngFor="let configuration of _configurationsList">
      <ion-item lines="full" color="white">
        <ion-label>
          <h2>{{configuration.name}}</h2>
          <ion-note>Created: {{ configuration.created | date: 'MM/dd/yy HH:mm' }}</ion-note>
        </ion-label>
        <ion-reorder slot="end"></ion-reorder>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option>Favorite</ion-item-option>
        <ion-item-option color="danger">Share</ion-item-option>
      </ion-item-options>
      <ion-item-options side="end">
        <ion-item-option>Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-reorder-group>
</ion-list>

reorderConfigurationsList(ev) {
    const itemToMove = this._configurationsList.splice(ev.detail.from, 1 ) [0];
    this._configurationsList.splice(ev.detail.to, 0, itemToMove );
    ev.detail.complete();
  }

Other information:

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.6
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   ios-sim : 8.0.0
   NodeJS  : v10.15.3 (/usr/local/bin/node)
   npm     : 6.9.0
   OS      : macOS Mojave
   Xcode   : Xcode 10.2 Build version 10E125

[liamdebeasi]

Hi there,

Thanks for the issue. Can you provide a repository with the code required to reproduce this issue? I am unable to reproduce it with the code snippet you provided.

Thanks!

[alperbalkaya]

Hi there,

Thanks for the issue. Can you provide a repository with the code required to reproduce this issue? I am unable to reproduce it with the code snippet you provided.

Thanks!

Of course. https://github.com/alperbalkaya/ionicReorderBug

[liamdebeasi]

Thanks for the follow up.

I have been investigating this issue and have a couple observations:

1. When sliding the item up, componentDidUnload is being called on the ion-item-sliding that was moved. This is causing any gesture listeners on the element to be destroyed (including the listener that lets you reveal the sliding options).
2. After componentDidUnload is called, there are still 3 items in the DOM (there were 3 to begin with). One would assume that the re-ordered item was destroyed and then re-created, but componentDidLoad was never fired. So I'm not sure if that means a) the component was firing componentDidUnload when it should not have been or b) the component was being re-created but not firing componentDidLoad when it should have been. (it also could be another case I'm not even thinking of 🙂)

I'm going to continue to dig into this, but just wanted to keep you in the loop.

Thanks!