Carousel Not work IE11

[riazi]

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]

Please see if this is still an issue with the latest release of reactstrap and BS4. If so, can you make an example on stackblitz? You can use https://stackblitz.com/edit/reactstrap-v5-beta-starter as a base

[obinnangini]

https://stackblitz.com/edit/reactstrap-v5-beta-starter-xdnyqn?file=Example.js

The carousel example available on the reactstrap site does not work in IE once the slide attempts to transition.

[supergibbs]

The failing code is:

reactstrap/src/CarouselItem.js

Line 42 in eea7d1b

node.dispatchEvent(new CustomEvent('slide.bs.carousel'));

Through sindresorhus/devtools-detect#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;
})();

[TheSharpieOne]

I think this is the only component which actually mimics the bootstrap events. I am not sure if we want the other components to do this or if we want to remove this and just use callbacks as other components currently do.

[supergibbs]

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

[jiehan1029]

I'm having carousel issue with IE 11 again, reactstrap 8.1.1, the problem code is:

../node_modules/reactstrap/es/CarouselItem.js in _this3 at line 62:1
  _proto.onExiting = function onExiting(node) {
    this.setState({
      startAnimation: true
    });
    node.dispatchEvent(new CustomEvent('slide.bs.carousel'));
    this.props.onExiting(node);
  };
  _proto.onExited = function onExited(node) {
    node.dispatchEvent(new CustomEvent('slid.bs.carousel'));

Is it a bug? any workaround?

[jiehan1029]

nvm, I polyfilled as mentioned above and works fine now.