Carousel Not work IE11

Issue description

• components: Carousel
• reactstrap version 5.0.0-alpha.4
• import method umd/csj/es (if umd, are you using the “full” version (only for v5+)?)
• react version 16.2.0
• bootstrap version 4.0.0-alpha.6

What is happening?

Carousel Not work IE11when click in carousel-indicators page failed

What should be happening?

Steps to reproduce issue

1. …
2. …

Error message in console

paste error message with stacktrack here

Code

class Sliderr extends Component {
    constructor(props) {
        super(props);
        this.state = { activeIndex: 0 };
        this.next = this.next.bind(this);
        this.previous = this.previous.bind(this);
        this.goToIndex = this.goToIndex.bind(this);
        this.onExiting = this.onExiting.bind(this);
        this.onExited = this.onExited.bind(this);
    }

    onExiting() {
        this.animating = true;
    }

    onExited() {
        this.animating = false;
    }

    next() {
        if (this.animating) return;
        const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
        this.setState({ activeIndex: nextIndex });
    }

    previous() {
        if (this.animating) return;
        const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
        this.setState({ activeIndex: nextIndex });
    }

    goToIndex(newIndex) {
        if (this.animating) return;
        this.setState({ activeIndex: newIndex });
    }

    render() {
        const { activeIndex } = this.state;

        const slides = items.map((item) => {
            return (
                <CarouselItem
                    onExiting={this.onExiting}
                    onExited={this.onExited}
                    key={item.src}
                >
                    <img src={item.src} alt={item.altText} />

                    <CarouselCaption captionText={item.description} captionHeader={item.caption} />
                </CarouselItem>
            );
        });

        return (
            <Carousel
                activeIndex={activeIndex}
                next={this.next}
                previous={this.previous}
            >
                <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
                {slides}
                <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
                <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
            </Carousel>
        );
    }
}


export default Sliderr;

[supergibbs]

The failing code is: https://github.com/reactstrap/reactstrap/blob/eea7d1b10b0367047b084a17b9746256a10df279/src/CarouselItem.js#L42

Through https://github.com/sindresorhus/devtools-detect/issues/9 and https://stackoverflow.com/questions/19345392/why-arent-my-parameters-getting-passed-through-to-a-dispatched-event/19345563 it seems we need a polyfill for IE9+ https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

[supergibbs]

I am pro not needing polyfills. In the meantime, I confirmed the above one works for this issue on IE11.