[Ionic V4.0.0-beta.7] [ion-item-sliding] Sliding not working after empty an element in array

[fkrishna]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\fkrishna\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

Describe the Bug
I created an array of 3 elements and i used the and the <ion-item-sliding">directive to show a list of sliding item. Each item has a remove button to remove the target element, but after removing one element the sliding stop working for the remaining items

Steps to Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Related Code

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let n of numbers; index as i">
      <ion-item>
        {{ n }}
      </ion-item>
      <ion-item-options>
        <ion-item-option " (click)="remove(i)">Delete</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

numbers = ['1','2','3'];
  constructor() {}
  remove(i) {
    this.numbers.splice(i, 1);
}

Expected Behavior
the sliding is suppose to work correctly for each items even after removing an element

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[quynh-ng]

I got the same issue.
By the way, the sliding items are not working after delete one, need to reload the app

[Majed93]

@quynh-ng I have the same issue, i've had to downgrade to beta.5 :(

[peterpeterparker]

Funny, just landed on that problem too, could confirm, if I delete with an action on item of the sliding list, the remaining items could not be slided anymore

p.s.: in beta.8 it's the case too

[fkrishna]

@quynh-ng same -_-

[jcollings]

Also had the same issue, with a dynamic list of elements, deleting an item with the component, then refreshing the elements cause it not to be able to delete any other elements until a refresh.

After digging around i noticed that without the refresh of elements it worked fine, looking at the docs there is a method to close all sliding items on the item or on the list. using this fixed the issue.

1. Giving the ion-list an id #dynamicList
2. Accessing that list by the id @ViewChild('dynamicList') dynamicList;
3. On clicking of <ion-item-option> triggering the dynamicList.closeSlidingItems() before deleting the record.

Hope this helps in the meantime, i am new to angular so hopefully i am not doing anything that stupid.

[peterpeterparker]

not all heroes wear capes, thx @jcollings for the solution!

html:

 <ion-list #slidingList>
   <ion-item-sliding>
     <ion-item-options side="end">
        <ion-item-option (click)="delete()">
        </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 </ion-list>

ts:

 import {List} from '@ionic/angular';

 @ViewChild('slidingList') slidingList: List;
 
 async delete() {
   // something
   await this.slidingList.closeSlidingItems();
 }

[Anthony2539]

@peterpeterparker it works fine but is it a solution or a workaround ?

[peterpeterparker]

@Anthony2539 probably a bit of both 😜

I don't know if it's a feature request or a bug

Some commit regarding slidings have been made recently I think, so maybe the problem is/will disappear

Anyhow, let's say that workaround works and won't arm my app I guess

[Majed93]

I'd say it's more a bug since i had to downgrade to get my e2e tests to pass again

[netsesame2]

This issue is obviously a bug. Remove an item should not need to close it before deleting, it's funny.

[DanielKlier]

I found that another workaround is to pass the reference to the ItemSliding to the delete method and then just closing that one item before deleting the list item:

HTML:

<ion-list>
  <ion-item-sliding *ngFor="let item of items" #slidingItem>
    <ion-item>>
      {{item.text}}
    </ion-item>
    <ion-item-options (ionSwipe)="deleteItem(slidingItem, item)">
      <ion-button color="danger" (click)="deleteItem(slidingItem, item)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </ion-button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

TS:

async deleteItem(slidingItem: ItemSliding, item: Item) {
    slidingItem.close(); // <-- this is the important bit!
    await this.itemService.deleteItem(item);
  }

[yixiaohou]

@mimacom-klier Thank you very much for solving my problem perfectly.

[JaballiAymen]

not work for me !!!

[bockoblur]

Workaround does not work for me, with or without calling close or closeSlidingItems methods.
What I noticed is: after I hide and then show item again, sliding does not seem to work, but if you try to slide an item and then click where button should be, you can actually trigger button action.
Here is a Stackblitz example.
On Stackblitz, I am using @ionic/angular@4.0.0-beta.5, but problem is also there with @ionic/angular@4.0.0-beta.13 on my local machine.

[DanielKlier]

@bockoblur: I checked out your Stackblitz example and played around with it for a bit. If you actually delete the items from the list, the workaround seems to work fine. If they are merely hidden and then shown again, the behavior is exactly as you described. This seems to be an issue with the transform: translate not being correctly applied to the list item element. Maybe the ItemSliding component still uses the old DOM reference to translate the item. You can find my modified example here: https://stackblitz.com/edit/ionic-4-item-sliding-show-hide-error-zxgbmf

[bockoblur]

Thanks for looking into this. It works ok.
Nevertheless, this is still an issue that needs to be addressed by ionic team...

[bitroost]

@mimacom-klier workaround works for me on latest Ionic (4.5.0).

[katzenjunge]

EDIT: Using @jcollings solution additionally works for adding and/or updating an item, which caused the same problem for me. Thank you!

This solution works for me using:
Ionic CLI: 4.5.0
Ionic Framework: @ionic/angular 4.0.0-beta.17

However, I believe this is still an issue that should be fixed, I doubt any developer would expect this behaviour.

[eatyourpeas]

Same for me. Work-around shmorkaround. Main thing is it gets me out of a big hole and I am grateful to @jcollings for that

[fransyozef]

Wauw .. was wrapping my head all day about this (also had the slide not working after updating the list items). Now found out why. Thankx @jcollings for the workaround. Hope this bug will be fixed.

[kuljeetsingh31]

Hi,

Facing the below issue:

Issue:
Ion Item Sliding works only for first time. It stops responding when I slide the ion-item, then go to another page & come back.

Tried the work around suggested by @jcollings. Tried closing all ion item sliding when leaving the view as follows:

ionViewWillLeave() {
    setTimeout(async() => {
      console.log('sliding list: ', this.slidingList);
      if(this.slidingList){
        await this.slidingList.closeSlidingItems();
      }
    },1000);
  }

but didn't work.

My slider code is as follows:

<ion-list #slidingList class="notifications" *ngIf="notificationCheck === 'true'">
    <ion-item-sliding *ngFor="let notification of notifications; index as i;">
      <ion-item lines="none" no-padding>
        <ion-row>
          <ion-col size="12" class="title">
            {{notification.title}}
          </ion-col>
          <ion-col size="12" class="description">
            {{notification.message}}
          </ion-col>
          <ion-col size="12" class="date-time">
            {{notification.createdDate | date:'medium'}}
          </ion-col>
          <i class="left-arrow"></i>
        </ion-row>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="secondary" (click)="goToURL(notification.actionURL)">
          <div slot="icon-only">
            <i class="fa fa-edit" *ngIf="notification.actionType === 'UPDATE'"></i>
            <i class="fa fa-eye" *ngIf="notification.actionType === 'VIEW'"></i>
          </div>
        </ion-item-option>
        <ion-item-option color="danger" (click)="deleteNotifications(notification.id)">
          <div slot="icon-only">
            <i class="fa fa-trash"></i>
          </div>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

Have tried with latest ionic version 4.0.0-rc.0. The issue still exists.

[kuljeetsingh31]

Hi,

Have tried playing around with this issue and found that in my case the culprit for Ion Item Slider become unresponsive was that whenever the view was getting changed the sliding options were not getting closed. So I did the following thing & it worked perfectly:

constructor(private location: Location,  private router: Router) {

    this.navigationSubscription = this.router.events.subscribe(async(e: any) => {
      if (e instanceof NavigationStart) {
        if(this.slidingList){
          await this.slidingList.closeSlidingItems();
        }
      }
    });

  }

Many thanks to @jcollings.

[elepetit]

I've donne this :
in .html

<ion-item-sliding #slidingItem>
<ion-item-option color="danger" (click)="del(slidingItem,carte)">Supprimer</ion-item-option>
in .ts
import {  IonItemSliding } from '@ionic/angular';

async del(slidingItem: IonItemSliding, carte){
	await slidingItem.close();
	let index = this.cartes.indexOf(carte);
        if(index > -1){
            this.cartes.splice(index, 1);
        }
}

works perfectly
Many thanks to @jcollings.

[amritaramnauth]

Can confirm that the issue still exists with 4.0.0-rc.0.

[jkeczan]

Can confirm this exists in 4.0.0-rc.1 as well

[pos7hink]

This bug still exist in 4.0.0-rc.2.
I use a ion-item-sliding inside virtual-scroll, so I can't use List.closeSlidingItems().
If I don't close a item sliding and leave the view using back button or something, then the item sliding stop working next time at all. I can't use (click) event in this case because I open the sliding and just leave. There is no change to catch (click) event.

Another workaround. It works for me.

in .html
<ion-item-sliding>....</ion-item-sliding>

in .ts
import {  IonItemSliding } from '@ionic/angular';
  @ViewChild(IonItemSliding) itemSliding: IonItemSliding;
   ionViewWillLeave() {
        setTimeout(() => { this.itemSliding.closeOpened(); }, 500);
   }

[norbertbede]

Dear Brandy,

@brandyscarney can you take a look ? we are in migration phase to v4 and i would like to hear ionic-team opinion. Looks me important issue.

big thanks.
norbert

[brandyscarney]

Thanks for tagging me! I added it to our project board to look into.

@manucorporat @mhartington @paulstelzer

[liamdebeasi]

Thanks for this issue! This has been merged in by PR #17492. It will be in the next release: 4.1.0. Please let us know if you are still seeing problems after that.

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