akiran / akiran/react-slick

Wrapping slider in <a> tag doesn't work as expected on mobile

Đang mở
#1,783 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
JavaScript
Star
11.9k
Fork
2.1k
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

### CodeSandBox example

* CodeSandBox link: https://codesandbox.io/s/react-slick-playground-up7mf
* Example from the above link: https://up7mf.csb.app/

### Issue

If I wrap the entire `Slider` component in an `a` tag I can swipe/switch slides and click on any slide and go to the URL specified. This works fine on desktop. On mobile, however, it works, but only on the first slide. Once you swipe to another slide and tap, you are not taken to the link specified. On second tap, however, it does take you to the URL specified.

I would expect to be taken to the URL specified on all slides on the first tap, not just one the first slide.

### Steps to reproduce the issue

Below are steps to reproduce the issue:
1. Go to https://up7mf.csb.app/ on a mobile device (or emulate a mobile device in your browser dev tools)
2. Tap on the first slide. Notice it takes you to Google.
3. Go back to https://up7mf.csb.app/
4. Swipe forward or backward (doesn't matter)
5. Tap on the new slide you are now on.
6. Notice you are not taken to Google this time.
7. Tap again.
8. Notice you are taken to Google now.

### Possible fix

This is the line of code that swallows the click event: https://github.com/akiran/react-slick/blob/ef32fce2bc9b4152d1006b661ed95512138be458/src/inner-slider.js#L413

This line marks the slide as not clickable:
https://github.com/akiran/react-slick/blob/ef32fce2bc9b4152d1006b661ed95512138be458/src/inner-slider.js#L453

I believe the `swipeMove` method that contains the line above should not get fired if the user has not actually moved but just performed a tap. Alternatively, if this method should be fired on tap, the slide should be marked as clickable again in a callback after `this.setState` on this line: https://github.com/akiran/react-slick/blob/ef32fce2bc9b4152d1006b661ed95512138be458/src/inner-slider.js#L455

### Conclusion

I can work on a PR if this gets acknowledged as a bug. Thanks.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.