better focus management

src/Button.jsx

@@ -23,6 +23,8 @@ function Button(props) {
       onClick={props.onClick}
       onKeyDown={props.onKeyDown}
       type={props.type}
+      ref={props.inputRef}
+      {...props}
     >
       {props.display}
     </button>
@@ -33,6 +35,7 @@ Button.propTypes = {
   buttonType: PropTypes.string,
   classNames: PropTypes.arrayOf(PropTypes.string),
   display: PropTypes.string.isRequired,
+  inputRef: PropTypes.func,
   onBlur: PropTypes.func,
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
@@ -42,6 +45,7 @@ Button.propTypes = {
 Button.defaultProps = {
   buttonType: undefined,
   classNames: [],
+  inputRef: () => {},
   onBlur: () => {},
   onClick: () => {},
   onKeyDown: () => {},

src/Dropdown.jsx

@@ -47,6 +47,8 @@ class Dropdown extends React.Component {
   componentDidUpdate() {
     if (this.state.open) {
       this.menuItems[this.state.focusIndex].focus();
+    } else if (this.toggleElem) {
+      this.toggleElem.focus();
     }
   }
 
@@ -86,7 +88,6 @@ class Dropdown extends React.Component {
       this.toggle();
     } else if (this.state.open && Dropdown.isTriggerKey('CLOSE_MENU', e.key)) {
       this.toggle();
-      this.toggleElem.focus();
     }
   }
 
@@ -138,7 +139,7 @@ class Dropdown extends React.Component {
             dd['dropdown-toggle'],
           ]}
           type="button"
-          ref={(toggleElem) => { this.toggleElem = toggleElem; }}
+          inputRef={(toggleElem) => { this.toggleElem = toggleElem; }}
         />
         <ul
           aria-label={this.props.title}