ionic-framework: Can`t slide ion-item-option after reorder ion-item

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.

2019-03-26_22-59-03

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 17 (6 by maintainers)

Commits related to this issue

Most upvoted comments

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

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!

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

@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!

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.