akiran / akiran/react-slick

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

オープン
#1,783 コメント 1 件 リアクション 0 件 担当者 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 を短くまとめたダイジェスト。