React-bootstrap (1.0.0-beta16) Carousel not working in Internet Explorer (IE)

Question

My React application is using react-bootstrap's carousel. The carousel works fine on Chrome, Firefox, Safari, Edge but does not work on Internet Explorer.

Issue: The carousel will switch the first time then freezes. It no longer automatically switches, and you can not click on the indicators to change page.

I have searched online and here and can not find a post/solution for my specific case.

My package.json shows which version on React-Bootstrap that i am using

"dependencies": {
    "react": "~16.11.0",
    "react-app-polyfill": "^1.0.5",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "~16.11.0",
    "react-router-dom": "~5.1.2",
    "react-scripts": "~3.2.0",
    "react-tabs": "^3.1.0"
  },

I am specifying to use polyfills as the first imports in my index.js

// these 2 MUST be the first 2 imports
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

A simplified version of my render method is

    return (
        <div >
            <Carousel interval="2000" >
                {this.state.carouselItemsArr.map(
                    (item, i) =>
                        <Carousel.Item key={i}>
                            <img src={item.image} alt="first" />
                            <Carousel.Caption>
                                <div className="...">
                                    {item.name}
                                </div>
                            </Carousel.Caption>
                        </Carousel.Item>
                )}
            </Carousel>                
        </div>
    );

Solutions tried

Ideally I would like to get the carousel working in Internet Explorer. If I can not get it working, then an acceptable work around is to show the first item in the carousel, not switch to any other and hide the indicators.

I can hide the indicators using JavaScript, but this does not stop the carousel switching once before freezing.

var showIndicators = (this._isIE) ? false : true;

 return (
     <div>
         <Carousel interval="2000" indicators={showIndicators}>
   ....

I tried hiding the indicators using css, but as soon as i add the media query (even if its empty) the whole site no longer renders in IE. Furthermore like the JavaScript workaround above it does not stop the carousel switching once.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS */
    .carousel-indicators {
        display:none;
    }
} 

Answer 1

The solution was to always ensure the "activeIndex" is 0 when the browser is IE. This stops the Carousel from switching between indexes. When the callback is fired when the active item is changed (onSelect), if the browser is IE do not change the active index. Therefore for IE the active index is always 0 (the first item) and therefore the Carousel never slides and simply appears like an image rather than the carousel.

export default class CarouselComponent extends React.Component {

     // determine if the browser is IE
     _isIE = /*@cc_on!@*/false || !!document.documentMode; 

    state = {
        activeIndex : 0
        carouselItemsArr: null,
    }

    componentDidMount() {
         // gets carousel items from server
         // var carouselItemsArr = .....
         self.setState({
             carouselItemsArr: items,
         });
    }

    /**
     * Callback fired when the active item changes.
     * If the browser is IE, do not change the activeIndex, 
     * therefore the carousel will not switch items
     */
    handleActiveItemChange = (selectedIndex, e) => {
         if (!this._isIE) {
            this.setState({
                activeIndex : selectedIndex,
            });
         }
    };

    return (
        <div>
            <Carousel interval="2000" 
                      activeIndex={this.state.activeIndex} 
                      onSelect={this.handleActiveItemChange}>

                {this.state.carouselItemsArr.map(
                     .....
                )}

            </Carousel>                
        </div>
    );