Ionic-framework: ion-reorder-group bugs in ionic/core

Created on 18 Jun 2018  路  6Comments  路  Source: ionic-team/ionic-framework

Bug Report

Ionic Info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

System:

    Node : v8.9.1
    npm  : 5.7.1
    OS   : macOS High Sierra

Misc:

    backend : pro

Describe the Bug
There are several issues when using the <ion-reorder-group> component with ionic/core and Stencil.

  1. There does not appear to be a way to get an event when the user moves an item. Prior versions of Ionic used <ion-list reorder="true" (ionItemReorder)="moveItem($event)"> so that the application could act on the change that was made by the user. The new <ion-reorder-group> component does not raise an event.
  2. The <ion-reorder> component does not result in the icon being displayed. It looks like the icon is getting rendered but it does not display. I used the style from the example:
<ion-content>
  <ion-list>
    <ion-reorder-group>
      <ion-item>
        <ion-label>
          Item 1
        </ion-label>
        <ion-reorder slot="end"></ion-reorder>
      </ion-item>
    </ion-reorder-group>
  </ion-list>
</ion-content>
  1. Dragging and dropping does not move the items.
triage

Most helpful comment

  1. (ionItemReorder) is definitely missing.
  2. I don't have any issue with the reorder icon rendering.
  3. If I add an icon (to delete the item for example), it doesn't render at the first loading, if you refresh, the icon renders.
<ion-reorder-group [disabled]="false">
   <ion-item *ngFor="let elt of elts;let i=index">
      <ion-icon name="close" slot="start" color="danger" (click)="removeElement(i)"></ion-icon>
   </ion-item>
</ion-reorder-group>
Ionic:

   ionic (Ionic CLI)          : 4.0.1 (C:\Users\Olivier\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.0
   @angular-devkit/schematics : 0.7.0-rc.0
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.9
   @ionic/schematics-angular  : 1.0.0-rc.9

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.0.2
   NodeJS            : v8.11.1 (C:\Program Files\nodejs\node.exe)
   npm               : 5.5.1
   OS                : Windows 10

Environment:

   ANDROID_HOME : C:\Users\Olivier\AppData\Local\Android\sdk

All 6 comments

  1. (ionItemReorder) is definitely missing.
  2. I don't have any issue with the reorder icon rendering.
  3. If I add an icon (to delete the item for example), it doesn't render at the first loading, if you refresh, the icon renders.
<ion-reorder-group [disabled]="false">
   <ion-item *ngFor="let elt of elts;let i=index">
      <ion-icon name="close" slot="start" color="danger" (click)="removeElement(i)"></ion-icon>
   </ion-item>
</ion-reorder-group>
Ionic:

   ionic (Ionic CLI)          : 4.0.1 (C:\Users\Olivier\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.0
   @angular-devkit/schematics : 0.7.0-rc.0
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.9
   @ionic/schematics-angular  : 1.0.0-rc.9

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.0.2
   NodeJS            : v8.11.1 (C:\Program Files\nodejs\node.exe)
   npm               : 5.5.1
   OS                : Windows 10

Environment:

   ANDROID_HOME : C:\Users\Olivier\AppData\Local\Android\sdk

Furthermore, https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md does not contain anything about the reorder components.

For me the reorder icon renders fine in Chrome, but not in Firefox or Edge.
(reproduce by opening https://beta.ionicframework.com/docs/api/reorder/ in all three browsers and click toggle in the preview)

It may also be worth noting that this page doesn't have content: https://beta.ionicframework.com/docs/reorder/

(ionItemReorder) still definitely missing. Hope someone can look at this soon.

Loving v4 so far. Cant wait till the few bugs are gone.

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.

Was this page helpful?
0 / 5 - 0 ratings