Wrapping slider in <a> tag doesn't work as expected on mobile
- Linguagem predominante
- JavaScript
- Estrelas
- 11.9k
- Forks
- 2.1k
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Descrição
### 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.
Guia de contribuição
Avaliação
Esta issue ainda não foi avaliada.