fix(Carousel): fix issue where changing activeIndex won't work (#6265)

react-bootstrap · Mar 10, 2022 · 0c7c5f7 · 0c7c5f7
1 parent 9bf5d0e
commit 0c7c5f7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -263,21 +263,23 @@ const Carousel: BsPrefixRefForwardingComponent<'div', CarouselProps> =
       activeIndex || 0,
     );
 
-    if (!isSliding && activeIndex !== renderedActiveIndex) {
-      if (nextDirectionRef.current) {
-        setDirection(nextDirectionRef.current);
-      } else {
-        setDirection(
-          (activeIndex || 0) > renderedActiveIndex ? 'next' : 'prev',
-        );
-      }
+    useEffect(() => {
+      if (!isSliding && activeIndex !== renderedActiveIndex) {
+        if (nextDirectionRef.current) {
+          setDirection(nextDirectionRef.current);
+        } else {
+          setDirection(
+            (activeIndex || 0) > renderedActiveIndex ? 'next' : 'prev',
+          );
+        }
 
-      if (slide) {
-        setIsSliding(true);
-      }
+        if (slide) {
+          setIsSliding(true);
+        }
 
-      setRenderedActiveIndex(activeIndex || 0);
-    }
+        setRenderedActiveIndex(activeIndex || 0);
+      }
+    }, [activeIndex, isSliding, renderedActiveIndex, slide]);
 
     useEffect(() => {
       if (nextDirectionRef.current) {

diff --git a/test/CarouselSpec.tsx b/test/CarouselSpec.tsx
@@ -408,17 +408,16 @@ describe('<Carousel>', () => {
     it('should go through the items given the specified intervals', () => {
       const onSelectSpy = sinon.spy();
       render(
-        <Carousel interval={1000} onSelect={onSelectSpy}>
-          <Carousel.Item interval={100}>Item 1 content</Carousel.Item>
+        <Carousel interval={5000} onSelect={onSelectSpy}>
+          <Carousel.Item interval={1000}>Item 1 content</Carousel.Item>
           <Carousel.Item>Item 2 content</Carousel.Item>
         </Carousel>,
       );
 
       // should be long enough to handle false positive issues
       // but short enough to not trigger auto-play to occur twice
-      // (since the interval for the second item should be `1000`)
-      clock.tick(200);
-
+      // (since the interval for the second item should be `5000`)
+      clock.tick(1100);
       onSelectSpy.should.have.been.calledOnceWith(1);
     });