fix dropdown sort

components/Dropdown.js

@@ -57,62 +57,21 @@ class Dropdown extends React.PureComponent {
 
   userInputtedValue = ''
 
-  renderDropdown = ({
-    isOpen,
-    highlightedIndex,
-    selectedItem,
-    getRootProps,
-    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>}
-        <DropdownIcon isOpen={isOpen}>{icon}</DropdownIcon>
-        <SelectedItem
-          getToggleButtonProps={getToggleButtonProps}
-          getInputProps={getInputProps}
-          isOpen={isOpen}
-          color={color}
-          hasIcon={!!icon}
-          disabled={disableInput}
-        >
-          {selectedItem.name}
-        </SelectedItem>
-        {isOpen ? (
-          <List color={color}>
-            {list.map((item, index) => (
-              <ListItem
-                key={index}
-                color={color}
-                item={item}
-                itemWrapper={itemWrapper}
-                {...getItemProps({
-                  item,
-                  isSelected: selectedItem.name === item.name,
-                  isHighlighted: highlightedIndex === index
-                })}
-              >
-                {item.name}
-              </ListItem>
-            ))}
-          </List>
-        ) : null}
-      </DropdownContainer>
-    )
-  }
-
   render() {
-    const { innerRef, selected, onChange, title } = this.props
+    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 (
@@ -126,12 +85,77 @@ class Dropdown extends React.PureComponent {
         onUserAction={this.onUserAction}
         labelId={labelId}
       >
-        {this.renderDropdown}
+        {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,
+  getRootProps,
+  getToggleButtonProps,
+  getInputProps,
+  getItemProps
+}) => {
+  return (
+    <DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
+      {title && <VisuallyHidden id={labelId}>{title}</VisuallyHidden>}
+      <DropdownIcon isOpen={isOpen}>{icon}</DropdownIcon>
+      <SelectedItem
+        getToggleButtonProps={getToggleButtonProps}
+        getInputProps={getInputProps}
+        isOpen={isOpen}
+        color={color}
+        hasIcon={!!icon}
+        disabled={disableInput}
+      >
+        {selectedItem.name}
+      </SelectedItem>
+      {isOpen ? (
+        <ListItems color={color}>
+          {list.map((item, index) => (
+            <ListItem
+              key={index}
+              color={color}
+              item={item}
+              itemWrapper={itemWrapper}
+              {...getItemProps({
+                item,
+                isSelected: selectedItem.name === item.name,
+                isHighlighted: highlightedIndex === index
+              })}
+            >
+              {item.name}
+            </ListItem>
+          ))}
+        </ListItems>
+      ) : null}
+    </DropdownContainer>
+  )
+}
+
 const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
   return (
     <div {...rest} ref={innerRef} className="dropdown-container">
@@ -174,9 +198,9 @@ const DropdownIcon = ({ children, isOpen }) => {
         </style>
       </div>
     )
+  } else {
+    return null
   }
-
-  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}