fix: carousel should stop immediately after interval is set to false

Fix reactstrap#2779
MariusJam · Apr 30, 2024 · ca383f0 · ca383f0
1 parent 6085ac0
commit ca383f0
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/src/Carousel.js b/src/Carousel.js
@@ -112,6 +112,9 @@ class Carousel extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
+    if (prevProps.interval !== this.props.interval && (prevProps.interval === false || this.props.interval === false)) {
+      this.setInterval();
+    }
     if (prevState.activeIndex === this.state.activeIndex) return;
     this.setInterval();
   }

diff --git a/src/__tests__/Carousel.spec.js b/src/__tests__/Carousel.spec.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import user from '@testing-library/user-event';
+import { shallow } from 'enzyme';
 import { Carousel } from '..';
 import CarouselItem from '../CarouselItem';
 import CarouselIndicators from '../CarouselIndicators';
@@ -765,5 +766,63 @@ describe('Carousel', () => {
       jest.advanceTimersByTime(1000);
       expect(next).toHaveBeenCalled();
     });
+
+    it('it should stop immediately when interval is set to false', () => {
+      const next = jest.fn();
+      const { rerender } = render(
+        <Carousel
+          next={next}
+          previous={() => {}}
+          interval="1000"
+          activeIndex={0}
+          ride="carousel"
+        >
+          {slides}
+        </Carousel>,
+      );
+
+      rerender(
+        <Carousel
+          next={next}
+          previous={() => {}}
+          interval={false}
+          activeIndex={0}
+          ride="carousel"
+        >
+          {slides}
+        </Carousel>,
+      );
+      jest.advanceTimersByTime(1000);
+      expect(next).not.toHaveBeenCalled();
+    });
+
+    it('it should restart when interval is set again', () => {
+      const next = jest.fn();
+      const { rerender } = render(
+          <Carousel
+              next={next}
+              previous={() => {}}
+              interval={false}
+              activeIndex={0}
+              ride="carousel"
+          >
+            {slides}
+          </Carousel>,
+      );
+
+      rerender(
+          <Carousel
+              next={next}
+              previous={() => {}}
+              interval="1000"
+              activeIndex={0}
+              ride="carousel"
+          >
+            {slides}
+          </Carousel>,
+      );
+      jest.advanceTimersByTime(1000);
+      expect(next).toHaveBeenCalled();
+    });
   });
 });