bug: item being clicked after reorder

[loopezz]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

After dragging (on mouseup) an item within ion-reorder-group the item gets clicked. This only occurs on non-touch devices and having the mouse pointer outside the ion-reorder element. With touch simulation enabled this behavior does not occur.

Touch simulation enabled:

Touch simulation disabled (e.g. web browser on PC):

Expected Behavior

The item must not be clicked.

Steps to Reproduce

1. Checkout "Code Reproduction URL"
2. Reorder an item in a web browser
3. Move the mouse pointer to the left while dragging

Code Reproduction URL

https://github.com/loopezz/ion-reorder.git

Ionic Info

Ionic:

   Ionic CLI                     : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.6.5
   @angular-devkit/build-angular : 17.1.0
   @angular-devkit/schematics    : 17.1.0
   @angular/cli                  : 17.1.0
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : not installed
   @capacitor/core    : 5.6.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 2.0.0

System:

   NodeJS : v18.19.0 (/usr/local/bin/node)
   npm    : 10.2.3
   OS     : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The browser handles when click events are dispatched, not Ionic. The reported behavior aligns with what happens outside of Ionic too (and it is also consistent across Chrome, Firefox, and Safari): https://codepen.io/liamdebeasi/pen/dyrzdQe

In this demo, click and drag from "Start here" over to "Drag over here and release". Once you release your mouse, the checkbox should be checked.

Mobile devices have different criteria for when click events are dispatched to account for accidental touches which may contribute to this behavior not happening on a physical mobile device.

---

While this is the correct browser behavior, you may be able to work around this by disabling the checkbox on pointer down and then re-enabling it on pointer up:

<ion-reorder-group (pointerdown)="disabled = true" (pointerup)="disabled = false" [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
    <ion-item *ngFor="let item of items">
        <ion-checkbox [disabled]="disabled" label-placement="end" justify="start" [checked]="item.checked" [value]="item.id" (ionChange)="handleChecked($any($event))">
            <div class="ion-text-wrap">{{ item.name }}</div>
        </ion-checkbox>
        <ion-reorder slot="end"> </ion-reorder>
    </ion-item>
</ion-reorder-group>

[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.