Dropdown is not working in IE11

[cbergmiller]

I noticed problems with the Dropdown component in IE11. The examples are broken in IE11, the dropdown won't open.

The method that is assigned to context.toggle in Dropdown does not respect the first parameter show that it is called with e.g. in DropdownMenu:

Dropdown

this.state = {
    context: {
        toggle: this.handleClick,
    }
}

handleClick = event => {
    this.toggleOpen(event);
};

toggleOpen(event) {
    let show = !this.props.show;
    this.props.onToggle(show, event);
}

DropdownMenu

  const handleClose = e => {
    if (!context.toggle) return;
    context.toggle(false, e);
  };

In my project this seems to cause a race condition. The react-bootstrap Dropdown menu can be opened in IE11, but cannot be closed by a click on the DropdownToggle. There are two consecutive toggles from the click and from the click outside. Seems to work fine in Firefox and Chrome though..

[taion]

Do you have a CodePen or equivalent that demonstrates this issue?

[cbergmiller]

I prepared a CodeSandbox but it seems their template for react doesn't support IE11 either.. The Dropdowns on the Example page don't work in IE11 (they wont even open when i try). So maybe you could those to reproduce the issue?

I tried to set up the dev environment to investigate the issue myself but i couldn't get it running (probably because i am not familiar with gatsby projects). After running yarn and yarn-bootstrap i get errors when i open the dev build:

ReferenceError: React is not defined
./src/examples/Modal.js/<
C:/Users/chris/WebstormProjects/react-overlays/www/src/examples/Modal.js:33

  30 |   };
  31 | };
  32 | 
> 33 | class ModalExample extends React.Component {
  34 |   constructor(...args) {
  35 |     super(...args);
  36 |     this.state = { showModal: false };

[taion]

You can try CodePen or JSFiddle as well.

[jquense]

Codepen is helpful for testing IE b/cit has a debug view that removes all the codepen chrome and code so you don't run into issues with that when running old code

[cbergmiller]

CodePen does not work in IE 11 for me: https://codepen.io/anon/pen/YodGwR#anon-login