Ionic-framework: 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 ([email protected])
   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!

[liamdebeasi]

Hi everyone,

There are some changes to Stencil actively being worked on that we think may resolve this issue. I am going to do some testing with it later this week and will post here when I have an update.

Thanks!

[alperbalkaya]

@liamdebeasi Any update here?

[liamdebeasi]

Hi @alperbalkaya,

The Stencil updates need a little bit more time to be worked. When I have another update I will post it here.

Thanks!

[digaus]

Yes fix would be awesome. Current workaround is changing the list reference -JSON.parse(JSON.stringify(list)) - which forces a rerender

[toze100]

I've posted some kind of solution that worked for me, don't know if is what you are looking for, but with the same issue I managed it to work as described in this recent comment, on 23 april 2019:
https://github.com/ionic-team/ionic/issues/16120

[digaus]

Issue also appears when using reorder group inside another reorder group.

[tinshee]

c

[pauljohnberry]

Just for information, I have a similar issue. In my case I have an ion-range slider in the ion-item being reordered, When I reorder and change the underlying array (ie: ev.detail.complete(this.myArray);), the slider freezes. nb: this behavior does not manifest itself when just calling ev.detail.complete().

[andreas-aeschlimann]

I have the same issue.

Yes fix would be awesome. Current workaround is changing the list reference -JSON.parse(JSON.stringify(list)) - which forces a rerender

I can confirm that this is a valid workaround. However, the whole list "blinks" for a short moment because for some reason, redrawing in Ionic is not as smooth as with Angular.

[brandyscarney]

Thanks for the issue! I was able to test out the latest Ionic with the update to Stencil One and confirmed it is still an issue in 4.6.2 and latest.

[BDominik]

I have the same issue.

Yes fix would be awesome. Current workaround is changing the list reference -JSON.parse(JSON.stringify(list)) - which forces a rerender

I can confirm that this is a valid workaround. However, the whole list "blinks" for a short moment because for some reason, redrawing in Ionic is not as smooth as with Angular.
Thanks.

[Wilsonoonn]

At present, in 4.12.0, there is still this problem, there is no final solution?

@liamdebeasi

[liamdebeasi]

@Wilsonoonn This issue was fixed and will be available in the next stable release of Ionic. For any new bug, I recommend creating a new issue.

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