ionic-framework: [Ionic 4.0.0-beta.13] not working for with

Ionic version: (check one with “x”) (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ ] 3.x [X] 4.x

I’m submitting a … (check one with “x”) [X] bug report [ ] feature request

Current behavior: A list of <ion-item-sliding> refuses to reorder when <ion-reorder> element is placed within the required <ion-item> element of an <ion-item-sliding>, with an <ion-item-options> element present within the same <ion-item-sliding>.

screen shot 2018-10-29 at 11 17 23 am

Expected behavior: Should be able to drag+drop to reorder <ion-item-sliding> with <ion-item-options>.

Steps to reproduce: Use this code, try and re-order list. The first two items with be moveable. The third won’t be. Once you’ve tried to move the third item, all of the items will then be non-movable.

<ion-list lines="full">
      <ion-reorder-group disabled="false" (ionItemReorder)="moveChecklist($event)">

      <ion-item-sliding>
        <ion-item href="/" routerDirection="forward" detail>
          <ion-reorder slot="start"></ion-reorder>
          <ion-label text-wrap>
            <h2>Moveable</h2>
          </ion-label>
        </ion-item>
      </ion-item-sliding>

      <ion-item-sliding>
          <ion-item href="/" routerDirection="forward" detail>
            <ion-reorder slot="start"></ion-reorder>
            <ion-label text-wrap>
              <h2>Moveable</h2>
            </ion-label>
          </ion-item>
        </ion-item-sliding>

      <ion-item-sliding>
        <ion-item detail>
          <ion-reorder slot="start"></ion-reorder>
          <ion-label text-wrap>
            <h2>Non moveable (ion-item-options present)</h2>
          </ion-label>
        </ion-item>
        <ion-item-options side="end">
            <ion-item-option color="light">
              <ion-icon name="clipboard" slot="top"></ion-icon>
            </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>

    </ion-reorder-group>
  </ion-list>
moveChecklist(e): void{
    e.detail.complete();
  }

Related code: See above

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : not installed

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.8
   @capacitor/core           : 1.0.0-beta.8

System:

   NodeJS : v8.12.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS High Sierra

About this issue

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

Most upvoted comments

I have the same issue in 4.0.0-rc.0

In the complete event add your array list in the parameter. like this:

moveChecklist(e): void { this.items = e.detail.complete(this.items); }

The method reorder your array list.

The same here … 4.0.0-rc.0. The drop doesn’t render correctly and allow no further drag/drop.

Any update on this issue? @LucasGuarnieri’s solution does not fix the problem of not being able to reorder list items that use ion-item-sliding and ion-item-options. I’m assuming that something is going on with the event handlers for the sliding gesture that is blocking the reorder gesture.

Still an issue in beta.16