patch dropdown for bootstrap v4

src/Dropdown/Dropdown.scss

@@ -3,3 +3,15 @@
 .btn-borderless {
     border: 0 !important;
 }
+
+// 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/Dropdown/index.jsx

@@ -98,19 +98,18 @@ class Dropdown extends React.Component {
 
   generateMenuItems(menuItems) {
     return menuItems.map((menuItem, i) => (
-      <li className={styles['dropdown-item']} key={i}>
-        <a
-          role="menuitem"
-          href={menuItem.href}
-          onKeyDown={this.handleMenuKeyDown}
-          ref={(item) => {
-            this.menuItems[i] = item;
-          }}
-          tabIndex="-1"
-        >
-          {menuItem.label}
-        </a>
-      </li>
+      <a
+        className={styles['dropdown-item']}
+        href={menuItem.href}
+        key={i}
+        onKeyDown={this.handleMenuKeyDown}
+        ref={(item) => {
+          this.menuItems[i] = item;
+        }}
+        role="menuitem"
+      >
+        {menuItem.label}
+      </a>
     ));
   }
 
@@ -138,14 +137,17 @@ class Dropdown extends React.Component {
           type="button"
           inputRef={(toggleElem) => { this.toggleElem = toggleElem; }}
         />
-        <ul
+        <div
           aria-label={this.props.title}
           aria-hidden={!this.state.open}
-          className={styles['dropdown-menu']}
+          className={classNames([
+            styles['dropdown-menu'],
+            { [styles.show]: this.state.open },
+          ])}
           role="menu"
         >
           {menuItems}
-        </ul>
+        </div>
       </div>
     );
   }