akiran / akiran/react-slick

[BUG] slickNext, slickPrev and slickGoTo broken when focusOnSelect={true} and fade={false}

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

Descripción

The solution to this issue https://github.com/akiran/react-slick/issues/1074 which was solved in this commit https://github.com/NickIannelli/react-slick/commit/30d5c2fe916c26db63caeef2d53caeee11d03e83 seems to now break the three methods `slickNext`, `slickPrev` and `slickGoTo`.

**Actual behaviour**: when calling `slickNext` on the first slide, the slider immediately jumps to the 2nd slide and then slides to the third slide.
**Expected behaviour**: just slide to the second slide.

This only happens if `fade={false}` and `focusOnSelect={true}`.

Fix is to remove the setTimeouts on the methods (seems like a weird solution anyway to be honest, that doesn't seem like a great way to solve race condition :/).

I'm not sure on how to solve this if the "use slider in componentDidMount" usecase is important (shouldn't we use the `initialSlide` prop instead? Or a setTimeout particular to the application that waits a little bit before navigating? I suggest removing the setTimeouts in the code here...).

I don't have time for a PR but if it's ok to not handle the usecase above then in the library the setimeouts here should be removed:

```ts
slickPrev = () => {
// this and fellow methods are wrapped in setTimeout
// to make sure initialize setState has happened before
// any of such methods are called
this.callbackTimers.push(
setTimeout(() => this.changeSlide({ message: "previous" }), 0)
);
};
slickNext = () => {
this.callbackTimers.push(
setTimeout(() => this.changeSlide({ message: "next" }), 0)
);
};
slickGoTo = (slide, dontAnimate = false) => {
slide = Number(slide);
if (isNaN(slide)) return "";
this.callbackTimers.push(
setTimeout(
() =>
this.changeSlide(
{
message: "index",
index: slide,
currentSlide: this.state.currentSlide
},
dontAnimate
),
0
)
);
};
```

Sandbox : https://codesandbox.io/s/react-slick-playground-forked-cdbf8?file=/index.js

Otherwise it's a problem with focusOnSelect, no time to investigate more now sorry :/

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.