diff --git a/CHANGELOG.md b/CHANGELOG.md index 501c900903..ef34e7b1d7 100644 --- a/CHANGELOG.md +++ b/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](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24) diff --git a/package.json b/package.json index 5f3cb620f2..98e07f45c6 100644 --- a/package.json +++ b/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", diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 0017a6d5f3..c0b2332a44 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/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) { const { search, multiple, getA11yStatusMessage, itemToString, toggleIndicator } = this.props - const { searchQuery } = this.state + const { defaultHighlightedIndex, searchQuery } = this.state return ( { 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)) } diff --git a/yarn.lock b/yarn.lock index dcf9e2d4ec..75fe4df07b 100644 --- a/yarn.lock +++ b/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"