DefaultActiveIndex not being applied after change in component state.

[laurencefass]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

I rasied an issue about activeIndex prop freezing the carousel and was advised to use defaultActiveIndex which has enabled navigation but for reasons I dont understand I cant set the defaultActiveIndex from a useEffect->setState() only when I initialise the component.

The Carousel is not responding to the value change on line 31 in the codesandbox detailed below. This may have something to do with controlled/uncontrolled components but I cant find anything in the docs relating to handling of controlled/uncontrolled Carousels.

Thanks

Expected behavior

I expected the component to update whenever I change the defaultActiveIndex value prop but it only updates on component initialisation.

To Reproduce

Run sandbox.

Reproducible Example

https://codesandbox.io/s/react-bootstrap-carousel-defautlativeindex-f3x54f

Screenshots

No response

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

2.1.0

What version of Bootstrap are you using?

5.1.3

Additional context

No response

[kyletsang]

defaultActiveIndex is only used when you first render the carousel.

Since you're looking to update this index from a useEffect or useState, this means you want to "control" the component. You would need to use activeIndex instead and implement the carousel callbacks such as onSelect to update the activeIndex.

See this example on a controlled carousel:
https://react-bootstrap.github.io/components/carousel/#controlled

[laurencefass]

The problem I face here is that I dont want to update the index from an internal carousel state change rather I want to instigate the change from an external event. Is that possible?

function ControlledCarousel() {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  return (
    <Carousel activeIndex={index} onSelect={handleSelect}>
     ...

I tried changing the activeIndex previously but it freezes the navigation. This code relies on me making the change using one of the carousel controls. Is there a way to change the active index from another event source?

Generally speaking I would expect the Carousel's active slide index to update when the activeIndex prop changes according to the basic rules of React rendering. i.e. prop changes trigger re-renders. Is there a specific reason why this component doesn't follow that rule?

I think I can achieve my aim by writing a thin HOC around the carousel to force the re-render I mention above but it seems like a hack.

[kyletsang]

What do you mean by freezing the navigation? Are you saying the timer or carousel buttons are not working?

onSelect is called within the component if anything within the carousel needs to change the index, which is either the timer, carousel indicators, or arrow buttons, so if you don't want these to work, you can avoid implementing onSelect. You're free to change activeIndex from wherever you need to.

[laurencefass]

I raised this issue just before this one when you advised to use the defaultActiveIndex. I reported that setting the activeIndex prop freezes the controls. The carousel navigation and timer do not work when activeIndex is set. Including onSelect hander does not affect it. #6262

Here is the sandbox demonstrating the problem the second carousel includes the prop and appears to be broken. i have rendered the active index also to show it is valid.
https://codesandbox.io/s/react-bootstrap-carousel-active-index-shoi7e?file=/src/App.js

[kyletsang]

Seems like a race condition where handleEnter isn't triggered internally. Need to investigate

[laurencefass]

Ive tested all way back to RBS version 1.6.4 hasnt been working for a while I think.

[laurencefass]

ok i have discovered that activeIndex wont work on its own it needs the feedback loop from onSelect event to feedback in the change. This is not entirely intuitive and I dont think works entirely in harmony with the react "re-render when props change" idea but this is no longer an issue for me. Thanks for your time and consideration.