question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can`t slide ion-item-option after reorder ion-item

See original GitHub issue

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

Issue Analytics

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

github_iconTop GitHub Comments

4reactions
digauscommented, Apr 19, 2019

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

3reactions
liamdebeasicommented, Apr 1, 2019

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can`t slide ion-item-option after reorder ion-item · Issue #17890
When sliding the item up, componentDidUnload is being called on the ion-item-sliding that was moved. This is causing any gesture listeners on ...
Read more >
<ion-reorder-group> not working well with <ion-item-sliding ...
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...
Read more >
How to reorder grouped items with ion-reorder - Stack Overflow
The ion-list-header should be above the ion-reorder-group , so Ionic won't treat it as a child of the ion-reorder-group and mess up the ......
Read more >
Use Sliding Gestures to Reorder an Ionic 2 List | egghead.io
[01:00] By default, if you swipe the item, the option will show up on the right side. This can be changed by setting...
Read more >
Ionic List - javatpoint
The Ionic lists don't contain an outside margin by default. When you need a list to fill your own container, you can add...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found