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.

ion-reorder-group bugs in ionic/core

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
olivier-pocommented, Jul 31, 2018
  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
1reaction
hcassar93commented, Aug 10, 2018

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

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

ion-reorder-group bugs in ionic/core · Issue #14640 - GitHub
Describe the Bug There are several issues when using the <ion-reorder-group> component with ionic/core and Stencil.
Read more >
ion-reorder - Ionic Framework
Ion -reorder is the anchor used to drag and drop the items inside of the ion-reorder-group. Read to learn more about custom reorder...
Read more >
Ionic Reorder - javatpoint
The Ionic provides a <ion-reorder> component for reordering feature. It allows you to drag and drop the list items, which changes the order...
Read more >
The 9 Most Common Mistakes That Ionic Developers Make
When working on a team, to avoid bugs you want to share the same environment, platforms, and plugins. With Cordova CLI, it's harder...
Read more >
Ionic 5 Angular 10 Start Template (forked) - StackBlitz
ion -list-header>. <ion-reorder-group (ionItemReorder). ="doReorder($event, group.id)". disabled="false">. <ion-item *ngFor='let item of group. items'>.
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