Ionic v4: <ion-reorder-group> not working well with <ion-item-sliding>

Ionic Framework
1

I’m playing with ionic v4 and trying to combine reorder with item-sliding to delete a row. It sort of works, but once I reorder a row, the rows which were moved no longer slide. any suggestions? This is what I have against the blank template

file home.page.html

  <ion-grid fixed>
    <ion-row>
      <ion-col size="6">
        <ion-list id="sliding-list-1">
          <ion-text color="primary">&lt;ion-reorder-group&gt; with &lt;ion-item-sliding&gt;</ion-text>
          <ion-reorder-group disabled="false"
            (ionItemReorder)="reorder($event)">
            <ion-item-sliding *ngFor="let item of items"
              (click)="close($event, item)">
              <ion-item>
                <ion-label>{{item}}</ion-label>
                <ion-reorder slot="end"></ion-reorder>
              </ion-item>
              <ion-item-options>
                <ion-item-option color="danger" slot="top" (click)="delete($event, item)">
                  <ion-icon name="trash" slot="top"></ion-icon>
                  <ion-label>Delete</ion-label>
                </ion-item-option>
              </ion-item-options>
            </ion-item-sliding>
          </ion-reorder-group>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>

file home.page.ts

export class HomePage {

  public items:string[] = ['dogs', 'cats', 'birds', 'fishes', 'emus'];

  public remove(item:string){
    console.log("reomove: ", item)
  }

  public reorder(ev){
    const {from, to} = ev.detail;
    const log = `${this.items[from]} moved to position ${to}: `;
    this.items.splice(to, 0, this.items.splice(from, 1)[0]);
    console.log(  log, this.items )

  }

  public delete(o, item) {
    this.close(o, item)
    this.items = this.items.filter( v=>v!=item)
    this.remove(item)
  }

  public close(o, item){
    const el = o.currentTarget.closest('ion-item-sliding');
    el.close()
    console.log("Close:", item)
  }
}

any ideas?

1 Like
2

I am struggling with this as well. Did you find a solution?

3

yes. sorry. there was a bug, but I can’t find it right now. basically, you have to close the slider before you delete. Use something like the following:

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomePage {
// get a reference to the list in your component, 
// e.g. <ion-list #mylist><ion-item-sliding></></>
@ViewChild('mylist') slidingList: List;

remove(item) {
  // close the slidingList before removing the item
  this.slidingList.closeSlidingItems();
}

}
4

Check this link, for related issues with a solution published on 23 april 2019: