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.

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
- fix(all): component reusage (#18963) Use new stencil APIs to allow ionic elements to be reused once removed from the DOM. fixes #18843 fixes #17344 fixes #16453 fixes #15879 fixes #15788 fixe... — committed to ionic-team/ionic-framework by manucorporat 5 years ago
- fix(all): component reusage (#18963) Use new stencil APIs to allow ionic elements to be reused once removed from the DOM. fixes #18843 fixes #17344 fixes #16453 fixes #15879 fixes #15788 fixe... — committed to ionic-team/ionic-framework by manucorporat 5 years ago
- fix(all): component reusage (#18963) Use new stencil APIs to allow ionic elements to be reused once removed from the DOM. fixes #18843 fixes #17344 fixes #16453 fixes #15879 fixes #15788 fixe... — committed to ionic-team/ionic-framework by manucorporat 5 years ago
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:
componentDidUnloadis being called on theion-item-slidingthat was moved. This is causing any gesture listeners on the element to be destroyed (including the listener that lets you reveal the sliding options).componentDidUnloadis 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, butcomponentDidLoadwas never fired. So I’m not sure if that means a) the component was firingcomponentDidUnloadwhen it should not have been or b) the component was being re-created but not firingcomponentDidLoadwhen 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.
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.