itemReorder does not look far up its ion-item heirarchy

[ionitron-bot[bot]]

Original issue by @ericeslinger on 2017-12-01T18:10:12Z

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

I'm submitting a ... (check one with "x") [X] bug report [ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I have an ion list that looks something like this:

<ion-list [reorder]="true">
  <div *ngFor="let item of items">
    <ion-item> {{ item stuff }} </ion-item>
  </div>
</ion-list>

and I cannot properly reorder the list. I get an error: reorder node not found from item-reorder-gesture, because the item only looks 4 levels up its DOM tree to find its reorder parent (if I hack this to look further up the tree, it works fine).

https://github.com/ionic-team/ionic/blob/52c40da986c4455c0e1a5edaa8e6ffe2bd914a27/src/components/item/item-reorder-util.ts#L18

What I was actually doing was trying to do a reorderable list of ion-items, the main content of which involves an ngSwitch (rendering different list item types), and some of those ngSwitchCase items are angular directives which themselves contain an ion-item, and I cannot change those. Because the child ion-item was (deeply) nested in a reorderable list, it also got a grab handle, so two handles rendered on the item, and the inner one was broken. Finding no convenient way to hard-code the "don't show the grab handle" on the inner item, I was experimenting with only having one item, but having it not be a direct descendant of the ion-list. It renders fine, it just refuses to reorder itself.

[Eraldo]

Any update on this one? I am also running into this issue it seems.

In my case I have a reorder-group with custom components inside:

    <ion-reorder-group [disabled]="false" (ionItemReorder)="reorder($event.detail)">
      <ng-container *ngFor="let item of items">
        <app-item [item]="item">
          <ion-reorder slot="end"></ion-reorder>
        </app-item>
      </ng-container>
    </ion-reorder-group>

[Eraldo]

Solved it by changing ng-container into div. ;)