bug: ion-reorder prevents click event when ion-reorder-group is disabled

[gr99t]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
If ion-reorder-group is disabled, all elements affected by ion-reorder that also have a click event are not working

Expected behavior:
If ion-reorder-group is disabled also disable ion-reorders click prevention

Related code:
Repo: (https://github.com/gr99t/ionic-reorder-card)

Ionic info:

Ionic:

   Ionic CLI                     : 6.5.0
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.14.1 
   npm    : 6.13.4
   OS     : Windows 10

[NikolaPeevski]

As a workaround you can wrap only your button in a ion-reorder

              <ion-reorder *ngIf="!reorderDisabled">
                <ion-icon slot="start" name="reorder-three"></ion-icon>
              </ion-reorder>

It's most likely stripping the click events due to adding it's own click events for draggable.

[liamdebeasi]

Thanks for the issue. Can you clarify the issue you are running into?

[gr99t]

Sure,

let's take the example from my repo, the ion-card has a click event bound to it:
<ion-card mode="md" *ngFor="let message of getMessages()" (click)="openMessage(message.id)" button>

When you run the app the ion-reorder-group is disabled, so no reordering is possible and when you click the card nothing is happening because the ion-reorder prevents all click events
https://github.com/ionic-team/ionic/blob/102a842bd2a967c04a3cf42ed4e0811929bd4d99/core/src/components/reorder/reorder.tsx#L15

If you enable the reordering everything just works as expected - click events from the wrapped element is prevented and only reordering is possible.

This also applies to simpler cases like an ion-item wrapped by an ion-reorder

<ion-reorder-group (ionItemReorder)="reorderItem($event.detail)" [disabled]="reorderDisabled">
    <ion-reorder *ngFor="let message of getMessages()">
      <ion-item (click)="openMessage(message.id)">
        <ion-label>{{ message.fromName }}</ion-label>
      </ion-item>
    </ion-reorder>
  </ion-reorder-group>

My assumption was that the ion-reorder-group is forwarding its disabled state to the ion-reorder and disable the click/propagation prevention

[denkomanceski]

I have the exact problem 👍

[pkunszt]

Same problem. Currently i have to implement list reordering without ion-reorder because of this.

[ionitron-bot]

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.