refactor modal to use portals

src/Dropdown/Dropdown.scss

 @import "~bootstrap/scss/_dropdown";
-
-// Trying to patch this upstream, then this can
-// be removed.
-// https://github.com/twbs/bootstrap/pull/23990
-.show {
-  > a:focus {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: Highlight;
-    outline: -webkit-focus-ring-color auto 5px;
-  }
-}

src/Modal/index.jsx

 import React from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -6,6 +7,9 @@ import styles from './Modal.scss';
 import Button, { buttonPropTypes } from '../Button';
 import newId from '../utils/newId';
 
+const modalRootId = 'modal-root';
+let modalRoot = document.getElementById(modalRootId);
+
 class Modal extends React.Component {
   constructor(props) {
     super(props);
@@ -16,6 +20,13 @@ class Modal extends React.Component {
     this.setCloseButton = this.setCloseButton.bind(this);
 
     this.headerId = newId();
+    this.el = document.createElement('div');
+
+    if (!modalRoot) {
+      modalRoot = document.createElement('div');
+      modalRoot.id = modalRootId;
+      document.body.appendChild(modalRoot);
+    }
 
     this.state = {
       open: props.open,
@@ -23,6 +34,7 @@ class Modal extends React.Component {
   }
 
   componentDidMount() {
+    modalRoot.appendChild(this.el);
     if (this.xButton) {
       this.xButton.focus();
     }
@@ -40,6 +52,10 @@ class Modal extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    modalRoot.removeChild(this.el);
+  }
+
   setXButton(input) {
     this.xButton = input;
   }
@@ -98,7 +114,7 @@ class Modal extends React.Component {
     return body;
   }
 
-  render() {
+  renderModal() {
     const { open } = this.state;
 
     return (
@@ -147,6 +163,13 @@ class Modal extends React.Component {
       </div>
     );
   }
+
+  render() {
+    return ReactDOM.createPortal(
+      this.renderModal(),
+      this.el,
+    );
+  }
 }
 
 Modal.propTypes = {