akiran / akiran/react-slick

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

Abierto
#1,783 1 comentario 0 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
JavaScript
Estrellas
11.9k
Forks
2.1k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.