Carousel is not correctly sliding from first index to last in 'prev' direction

[AndrewCi]

When on the first slide and triggering a slide event in 'prev' direction, the carousel slides to the correct element, the last slide, but with a 'next' animation. This can, for example, be observed in the documentation here:

https://react-bootstrap.github.io/components/carousel/#example

The effect is most apparent when repeatedly sliding to the previous slide. The transition from first to last is simply off.

For comparison the expected behavior from the Bootstrap carousel:

https://getbootstrap.com/docs/4.0/components/carousel/#with-controls

Unfortunately my knowledge in this area is so limited that I can't even find the event handler responsible for the actual transition, so I don't actually know where to look for this, but maybe one of you guys know why this is happening.

I'm using v1.2.2. Here is an example (not sure if it's the same version) https://codesandbox.io/s/runtime-grass-l2cg4?file=/package.json

related to #3654

[AndrewCi]

@kosmiq

[kyletsang]

I can repro this in the code sandbox example, but not the RB site. Looks like the StrictMode in the code sandbox is causing multiple renders which causes the following code to recalculate the direction in the wrong way.

react-bootstrap/src/Carousel.tsx

Lines 254 to 259 in 26ee2b9

	if (nextDirectionRef.current) {
	setDirection(nextDirectionRef.current);
	nextDirectionRef.current = null;
	} else {
	setDirection((activeIndex || 0) > renderedActiveIndex ? 'next' : 'prev');
	}

[AndrewCi]

I can repro this in the code sandbox example, but not the RB site. Looks like the StrictMode in the code sandbox is causing multiple renders which causes the following code to recalculate the direction in the wrong way.

react-bootstrap/src/Carousel.tsx

Lines 254 to 259 in 26ee2b9

	if (nextDirectionRef.current) {
	setDirection(nextDirectionRef.current);
	nextDirectionRef.current = null;
	} else {
	setDirection((activeIndex || 0) > renderedActiveIndex ? 'next' : 'prev');
	}

Interesting. I currently run my site wrapped within StrictMode so that might explain the source of the issue. Is there an easy way to make this component compatible with StrictMode?

[kyletsang]

Unfortunately no. Might have a fix here, just testing now.