close drop down no matter how create theme menu is selected

components/Dropdown.js

@@ -57,13 +57,14 @@ class Dropdown extends React.PureComponent {
   userInputtedValue = ''
 
   render() {
-    const { color, selected, onChange, itemWrapper, icon, disableInput } = this.props
+    const { innerRef, color, selected, onChange, itemWrapper, icon, disableInput } = this.props
     const { itemsToShow, inputValue } = this.state
 
     const minWidth = calcMinWidth(itemsToShow)
 
     return (
       <Downshift
+        ref={innerRef}
         inputValue={inputValue}
         selectedItem={selected}
         defaultHighlightedIndex={itemsToShow.findIndex(it => it === selected)}

components/Themes/index.js

@@ -51,6 +51,8 @@ class Themes extends React.PureComponent {
     selected: null
   }
 
+  dropdown = React.createRef()
+
   componentDidMount() {
     const storedThemes = getThemes(localStorage) || []
 
@@ -76,9 +78,10 @@ class Themes extends React.PureComponent {
       highlights: themes.find(({ id }) => id === preset).highlights
     }))
 
-  handleDropdown = ({ id }) => {
+  handleChange = ({ id }) => {
     if (id === 'create') {
       this.props.toggleVisibility()
+      this.dropdown.current.closeMenu()
     } else {
       this.props.updateTheme(id)
     }
@@ -153,13 +156,14 @@ class Themes extends React.PureComponent {
     return (
       <div className="themes">
         <Dropdown
+          innerRef={this.dropdown}
           icon={themeIcon}
           disableInput={isVisible}
           inputValue={dropdownValue}
           selected={dropdownValue}
           list={dropdownList}
           itemWrapper={this.itemWrapper}
-          onChange={this.handleDropdown}
+          onChange={this.handleChange}
           onOpen={isVisible && toggleVisibility}
         />
         {isVisible && (