moveToIdx does not work in certain conditions

[Reg93]

Hello! I have component of match where users can change scores of their games. Keen-slider works good! But i have one issue.

When i add new set of match or remove one of existing sliders has to move to indexes of last set. But it does not happen.

Func of moving slides:

const changeSlidesInSlider = useCallback((sets, index, tiebreak) => {
		if (sets.length > 0) {
			const lastSliderIndex = sliderLenght.length - 1
			const activeSet = getActiveSet(sets, index)
			const { score1, score2, tie_break_score1, tie_break_score2 } = activeSet

			let leftCurrentSlide = tiebreak ? tie_break_score1 : score1
			let rightCurrentSlide = tiebreak ? tie_break_score2 : score2

			if (leftCurrentSlide > lastSliderIndex) {
				leftCurrentSlide = 10
			} else if (!leftCurrentSlide && tiebreak && tier === 'tier2') {
				leftCurrentSlide = 7
			} else if (!leftCurrentSlide && tiebreak && tier === 'tier1') {
				leftCurrentSlide = 0
			}

			if (rightCurrentSlide > lastSliderIndex) {
				rightCurrentSlide = 10
			} else if (!rightCurrentSlide && tiebreak && tier === 'tier2') {
				rightCurrentSlide = 7
			} else if (!rightCurrentSlide && tiebreak && tier === 'tier1') {
				rightCurrentSlide = 0
			}

			if (!leftCurrentSlide && !rightCurrentSlide) {
				instanceRef1.current.moveToIdx(0)
				instanceRef2.current.moveToIdx(0)
			} else {
				instanceRef1.current.moveToIdx(leftCurrentSlide)
				instanceRef2.current.moveToIdx(rightCurrentSlide)
			}
		} else {
			instanceRef1.current.moveToIdx(0)
			instanceRef2.current.moveToIdx(0)
		}
	}, [sliderLenght, tier, instanceRef1, instanceRef2])

func where i add new set:

	const handleAddSet = useCallback(() => {
		const newSet = tier === 'tier1' ? newSetT1 : newSetT2
		const addedSet = {
			...newSet,
			'order_number': matchState.sets.length + 1,
		}

		const sets = [...matchState.sets, addedSet]
		setMatchState(prev => { return { ...prev, sets } })

		const lastSetIndex = sets.length - 1
		setActiveSetIndex(lastSetIndex)

		changeSlidesInSlider(sets, lastSetIndex, tiebreak)
	}, [matchState.sets, tier, changeSlidesInSlider, tiebreak])

instances of sliders are same, for first one:

	const [sliderRef1, instanceRef1] = useKeenSlider(
		{
			animationEnded(slider) {
				setIndexOfSlider1(slider.track.details.rel)
			},
			created() {
				setLoaded1(true)
			},
			dragStarted() {
				setTouched(1)
			},
			initial: getInitialSlide(matchState, 1),
			loop: true,
			vertical: true,
			slides: {
				origin: 'center',
				spacing: 0,
				perView: 3
			},
			centeredSlides: true,
			mode: 'free-snap',
		},
	)

elements:

{loaded1 && instanceRef1.current && (
	<div className="keen-slider__buttons">
		<button
			onClick={(e) => {
				e.stopPropagation() || instanceRef1.current?.prev()
				setTouched(1)
			}}
			className="slider__button"
		>
			<Plus className="slider__button-icon" />
		</button>

		<button
			onClick={(e) => {
				e.stopPropagation() || instanceRef1.current?.next()
				setTouched(1)
			}}
			className="slider__button"
		>
			<Minus className="slider__button-icon" />
		</button>
	</div>
)}

<div className="sliders_container">
	<div ref={sliderRef1} className="keen-slider slider">
		{sliderLenght.map((item, index) => (
			<div key={index} className="keen-slider__slide slider-slide">
				{item}
			</div>
		))}
</div>

Also i noticed that if i remove line setMatchState(prev => { return { ...prev, sets } }), sliders move fine. Or i have wrap in setTimeouts moveToIdx funcs in changeSlidesInSlider.

How can i fix it?

[Reg93]

Sorry for the view of code. No idea why part of that is not marked as code

[BenceSzalai]

Multiline code should be wrapped in tripple backticks: ``` /* multiline code here */ ``` That way they will be shown fine. You can also add file extension for highlighting, like: ```js /* multiline code here */ ``` or ```html /* multiline code here */ ```

You can go back and edit your comment, so i'll become readable, because in its current state it's kind of hard to comprehend.

[Reg93]

Multiline code should be wrapped in tripple backticks: ``` /* multiline code here */ ``` That way they will be shown fine. You can also add file extension for highlighting, like: ```js /* multiline code here */ ``` or ```html /* multiline code here */ ```

You can go back and edit your comment, so i'll become readable, because in its current state it's kind of hard to comprehend.

Thank you for answer. Corrected it