akiran / akiran/react-slick

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

未关闭
#1,783 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
JavaScript
星标
11.9k
派生
2.1k
PR 合并指标
30 天内没有已合并 PR

描述

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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。