search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.93k stars 13.52k forks source link

bug: swiper 7 preventing mouse events from propagating #23984

Closed davidgeary closed 2 years ago

davidgeary commented 2 years ago

Prequisites

Ionic Framework Version

Current Behavior

I have page containing an ion-reorder-group placed on a Swiper.js v7 slide. When viewing in a browser (tested in both Firefox and Chrome), reordering works correctly when the page is being displayed in 'mobile device' mode - dragging horizontally switches between the slides and dragging vertically (on the reorder icon) moves the item to a new position in the list.

If the page is viewed in 'non-mobile' mode, the slider still works but dragging the reorder icon no longer moves the item.

Screen recording: https://user-images.githubusercontent.com/1843264/134885406-e4182253-8f40-41c0-8179-029ed2c906f7.mp4

Expected Behavior

Reordering items should work regardless of the browser's mobile/responsive mode being set or not.

Steps to Reproduce

  1. Build/serve the test app and open a browser to http://localhost:8100/home
  2. Open the browser's DevTools
  3. If not already in mobile/responsive mode, click the 'Toggle device toolbar' (Chrome)/'Responsive Design Mode' (Firefox) button (or press Ctrl + Shift + M) and refresh the page (press F5)
  4. Swipe to slide 2 to view the ion-reorder-group component
  5. Drag items up and down - works as intended
  6. Turn off mobile/responsive mode and refresh the page again
  7. Swipe to slide 2
  8. Try to drag items up and down - no longer responds

Code Reproduction URL

https://github.com/davidgeary/reorder-test

Ionic Info

Ionic:

Ionic CLI : 6.17.1 (C:\Users\David\AppData\Roaming\nvm\v14.15.4\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 6.0.0-beta.6 @angular-devkit/build-angular : 12.1.4 @angular-devkit/schematics : 12.1.4 @angular/cli : 12.1.4 @ionic/angular-toolkit : 4.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe) npm : 6.14.10 OS : Windows 10

Additional Information

No response

liamdebeasi commented 2 years ago

Thanks for the issue. I can reproduce this. It looks like Swiper 7 is preventing certain mouse events from propagating, causing ion-reorder to not function when using a mouse. I will look into reporting this to the Swiper team.

As an additional not, I cannot reproduce this using ion-slides which uses Swiper 5, so something in either Swiper 6 or Swiper 7 caused this issue.

liamdebeasi commented 2 years ago

Setting [touchStartPreventDefault]="false" on <swiper> fixes the issue. This is disabled automatically in ion-slides, but developers will need to do this manually when using <swiper> directly: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/slides.tsx#L414

I am going to close this but will make sure the migration guide has this noted.

davidgeary commented 2 years ago

@liamdebeasi Wow, that was a quick resolution - thanks. I was in two minds as to whether it was a bug in Ionic or Swiper, so it sounds like a good catch for noting in the migration guide.

I can confirm that setting touchStartPreventDefault on the swiper fixes it.

ionitron-bot[bot] commented 2 years ago

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.