akiran / akiran/react-slick

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

Offen
#1,949 3 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
11.9k
Forks
2.1k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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 :/

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.