fix dropdown sort

components/Dropdown.js

@@ -57,7 +57,60 @@ class Dropdown extends React.PureComponent {
 
   userInputtedValue = ''
 
-  renderDropdown = ({
+  render() {
+    const {
+      innerRef,
+      color,
+      selected,
+      onChange,
+      itemWrapper,
+      icon,
+      disableInput,
+      title
+    } = this.props
+    const { itemsToShow, inputValue } = this.state
+
+    const minWidth = calcMinWidth(itemsToShow)
+
+    const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined
+
+    return (
+      <Downshift
+        ref={innerRef}
+        inputValue={inputValue}
+        selectedItem={selected}
+        defaultHighlightedIndex={itemsToShow.findIndex(it => it === selected)}
+        itemToString={item => item.name}
+        onChange={onChange}
+        onUserAction={this.onUserAction}
+        labelId={labelId}
+      >
+        {renderDropdown({
+          color,
+          list: itemsToShow,
+          selected,
+          minWidth,
+          itemWrapper,
+          icon,
+          disableInput,
+          title,
+          labelId
+        })}
+      </Downshift>
+    )
+  }
+}
+
+const renderDropdown = ({
+  color,
+  list,
+  minWidth,
+  itemWrapper,
+  icon,
+  disableInput,
+  title,
+  labelId
+}) => ({
   isOpen,
   highlightedIndex,
   selectedItem,
@@ -65,13 +118,7 @@ class Dropdown extends React.PureComponent {
   getToggleButtonProps,
   getInputProps,
   getItemProps
-  }) => {
-    const { list, color, itemWrapper, icon, disableInput, title } = this.props
-    const { itemsToShow } = this.state
-
-    const minWidth = calcMinWidth(itemsToShow)
-    const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined
-
+}) => {
   return (
     <DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
       {title && <VisuallyHidden id={labelId}>{title}</VisuallyHidden>}
@@ -87,7 +134,7 @@ class Dropdown extends React.PureComponent {
         {selectedItem.name}
       </SelectedItem>
       {isOpen ? (
-          <List color={color}>
+        <ListItems color={color}>
           {list.map((item, index) => (
             <ListItem
               key={index}
@@ -103,33 +150,10 @@ class Dropdown extends React.PureComponent {
               {item.name}
             </ListItem>
           ))}
-          </List>
+        </ListItems>
       ) : null}
     </DropdownContainer>
   )
-  }
-
-  render() {
-    const { innerRef, selected, onChange, title } = this.props
-    const { itemsToShow, inputValue } = this.state
-
-    const labelId = title ? `${title.toLowerCase()}-dropdown` : undefined
-
-    return (
-      <Downshift
-        ref={innerRef}
-        inputValue={inputValue}
-        selectedItem={selected}
-        defaultHighlightedIndex={itemsToShow.findIndex(it => it === selected)}
-        itemToString={item => item.name}
-        onChange={onChange}
-        onUserAction={this.onUserAction}
-        labelId={labelId}
-      >
-        {this.renderDropdown}
-      </Downshift>
-    )
-  }
 }
 
 const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
@@ -174,9 +198,9 @@ const DropdownIcon = ({ children, isOpen }) => {
         </style>
       </div>
     )
-  }
-
+  } else {
     return null
+  }
 }
 
 const SelectedItem = ({
@@ -246,7 +270,7 @@ const SelectedItem = ({
   )
 }
 
-const List = ({ children, color }) => {
+const ListItems = ({ children, color }) => {
   return (
     <ul role="listbox" className="dropdown-list">
       {children}