Ionic4 - Nested reorder groups problem - 2nd level reorder stops working after moving 1st level component

Ionic Framework
1

TL/DR

Nested (2nd level) ion-reorder-group stops working, after moving its parent in higher ion-reorder-group (1st level).

The demo project is here: ionic4 nested reorder

Any idea what’s wrong?

The Case

I have an ion-reorder-group containing a list of questions. Each of the questions have nested ion-reorder-group with answers. User shall be able to reorder the questions, and reorder answers on the list of each question. Both, the questions and the answers, use handle for drag and drop.

The Problem

This works correctly when the page is rendered for the first time. But when a question is moved, the nested reorder list with the answers does not work anymore - the handle of the answer now drags the whole question.

Expected Behavior

The nested reorder list shall work correctly, after its 1st level reorder object is reordered.

My clunky workaround

By trial and error, I figured out, that the answers can be reordered again, if I use *ngIf=“hide” to hide the reorder list after moving of a question, and asynchronously let it appear again.

questionMoved() {
   this.hideAnswers = true;
   setTimeout(()=>{
     this.hideAnswers = false;
   }, 0);
}
<ion-reorder-group
  *ngIf="!this.hideAnswers"
  disabled="false"
  (ionItemReorder)="itemReorder($event)"
>

HomePage - the list of questions

...

export class HomePage {
questions = [
    {
      question: "Question 1",
      answers: ["Yes","No","Not sure",]
    },
    {
      question: "Question 2",
      answers: ["A","B","C","D",]
    },
    {
      question: "Question 3",
      answers: ["Yes","No","Not sure",]
    }
  ];

itemReorder(event) {
    event.detail["complete"](true);
}
...

<ion-reorder-group
    (ionItemReorder)="itemReorder($event)"
    disabled="false"
    id="reorderQuestions"
  >
      <div 
        *ngFor="let current of this.questions; let i = index" 
        class="question"
      >
        <ion-item>
          <ion-reorder slot="end" style="border: 2px solid black;"></ion-reorder>
          <ion-label>{{ current.question }}</ion-label>
        </ion-item>
        <ion-item>
          <app-answers
            style="width: 75%;"
            [answers]=current.answers
          ></app-answers>
        </ion-item>
      </div>
  </ion-reorder-group>

Answers component - the list of answers

This component is used in each of the question.

@Component({
  selector: 'app-answers',
  templateUrl: 'answers.component.html',
  styleUrls: ['answers.component.scss'],
})
export class AnswersComponent {

  @Input() answers = [];

  itemReorder(event) {
    event.detail["complete"](true);
    event.stopPropagation();
  }

}

<ion-reorder-group
  disabled="false"
  (ionItemReorder)="itemReorder($event)"
>
  <ion-item 
    *ngFor="let current of this.answers; let i = index" 
    class="answers"
  >
    <ion-label>{{ current }}</ion-label>
    <ion-reorder slot="end" style="border: 2px solid black;"></ion-reorder>
  </ion-item>
</ion-reorder-group>
2

Experiencing basically an identical problem a year later. Wish there was an answer. Did you ever figure anything out for it?

3

Is it possible this is a cousin of this topic, requiring manual change detection triggering?

4

Thanks for responding rapropos.
Okay after reviewing this again I realized I was a dummy and didnt read thoroughly enough. Not quite my exact scenario. I’ve got two ion-reorder-groups, one nested in the other. When the child group changes it also changes the parent group. Is this some form of propagation? If so can I stop it from bubbling with event.stopPropagation()?
I need them to be independent of eachother somehow.

5

Turns out event.stopPropagation() fixed my issue (so far)
If I had nested <ion-reorder-group>s then stopping propagation of the child group preventing the parent group from being modified.