fix(Dropdown): Highlights selected option in single selection

CHANGELOG.md

@@ -40,6 +40,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Make `headerMedia` visible for screen readers in `ListItem` @layershifter ([#772](https://github.com/stardust-ui/react/pull/772))
 - Cleanup for `Dropdown` examples' accessibility and added localisation example. @silviuavram ([#771](https://github.com/stardust-ui/react/pull/771))
+- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) 
 
 <!--------------------------------[ v0.18.0 ]------------------------------- -->
 ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24)

package.json

@@ -66,7 +66,7 @@
   "homepage": "https://github.com/stardust-ui/react#readme",
   "dependencies": {
     "classnames": "^2.2.5",
-    "downshift": "^3.1.12",
+    "downshift": "^3.2.0",
     "fela": "^10.1.3",
     "fela-plugin-fallback-value": "^10.1.3",
     "fela-plugin-placeholder-prefixer": "^10.1.3",

src/components/Dropdown/Dropdown.tsx

@@ -144,6 +144,7 @@ export interface DropdownState {
   backspaceDelete: boolean
   focused: boolean
   searchQuery?: string
+  defaultHighlightedIndex: number
 }
 
 /**
@@ -228,6 +229,8 @@ export default class Dropdown extends AutoControlledComponent<
       focused: false,
       searchQuery: search ? '' : undefined,
       value: multiple ? [] : null,
+      // used on single selection to open the dropdown with the selected option as highlighted.
+      defaultHighlightedIndex: !this.props.search && !this.props.multiple ? null : undefined,
     }
   }
 
@@ -239,19 +242,20 @@ export default class Dropdown extends AutoControlledComponent<
     unhandledProps,
   }: RenderResultConfig<DropdownProps>) {
     const { search, multiple, getA11yStatusMessage, itemToString, toggleIndicator } = this.props
-    const { searchQuery } = this.state
+    const { defaultHighlightedIndex, searchQuery } = this.state
 
     return (
       <ElementType className={classes.root} {...unhandledProps}>
         <Downshift
           onChange={this.handleSelectedChange}
-          inputValue={search ? searchQuery : undefined}
+          inputValue={search ? searchQuery : null}
           stateReducer={this.handleDownshiftStateChanges}
           itemToString={itemToString}
           // If it's single search, don't pass anything. Pass a null otherwise, as Downshift does
           // not handle selection by default for single/multiple selection and multiple search.
           selectedItem={search && !multiple ? undefined : null}
           getA11yStatusMessage={getA11yStatusMessage}
+          defaultHighlightedIndex={defaultHighlightedIndex}
           onStateChange={changes => {
             if (changes.isOpen && !search) {
               this.listRef.current.focus()
@@ -703,6 +707,11 @@ export default class Dropdown extends AutoControlledComponent<
       value: newValue,
       searchQuery: '',
     })
+    if (!this.props.search && !this.props.multiple) {
+      this.setState({
+        defaultHighlightedIndex: this.props.items.indexOf(item),
+      })
+    }
     if (getA11ySelectionMessage && getA11ySelectionMessage.onAdd) {
       this.setA11yStatus(getA11ySelectionMessage.onAdd(item))
     }

yarn.lock

@@ -2969,10 +2969,10 @@ dot-prop@^4.1.0:
   dependencies:
     is-obj "^1.0.0"
 
-downshift@^3.1.12:
-  version "3.1.12"
-  resolved "https://registry.yarnpkg.com/downshift/-/downshift-3.1.12.tgz#70da0bfb92711393717206cc008b865e7f9fde4d"
-  integrity sha512-dkDlHVIHFT9kFxvPcmlp/kIwV1Uq/aI4rC70nNQkDGZNrpcexfnv4sIVK0hkIuewr9ZNo+Keqcwr3ao476YqJQ==
+downshift@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-3.2.0.tgz#820f40575683d3fc521a9ffd409ef4a69cef531d"
+  integrity sha512-IXZ3IB7xU51R04olRGSp8GBmJhPlCL8tW5FjZrJh8e4kB4BGUWsQHZ9tNsO+qNLABieR5DIgYBZ9MncPlwZSDg==
   dependencies:
     "@babel/runtime" "^7.1.2"
     compute-scroll-into-view "^1.0.9"