From cb3110faa8f963fb3958c0aa8db69caebaebaaff Mon Sep 17 00:00:00 2001 From: Silviu Avram Date: Tue, 15 Jan 2019 11:51:08 +0100 Subject: [PATCH 1/8] applied changes on Stardust --- src/components/Dropdown/Dropdown.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 0017a6d5f3..36d8a64342 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,7 @@ export default class Dropdown extends AutoControlledComponent< focused: false, searchQuery: search ? '' : undefined, value: multiple ? [] : null, + defaultHighlightedIndex: !this.props.search && !this.props.multiple ? null : undefined, } } @@ -239,19 +241,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() @@ -519,6 +522,14 @@ export default class Dropdown extends AutoControlledComponent< if (state.isOpen && document.activeElement === this.listRef.current) { return {} // won't change state in this case. } + case Downshift.stateChangeTypes.clickItem: + case Downshift.stateChangeTypes.keyDownEnter: + if (!this.props.search && !this.props.multiple) { + this.setState({ + defaultHighlightedIndex: state.highlightedIndex, + }) + } + return changes default: return changes } From 5f5efa7f13d3e064c501545135c90a977f93312f Mon Sep 17 00:00:00 2001 From: Silviu Avram Date: Fri, 25 Jan 2019 12:06:02 +0100 Subject: [PATCH 2/8] bumped downshift version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 1f2cd21fe9c6c54051a611e5e2dcbc58d2259df7 Mon Sep 17 00:00:00 2001 From: Silviu Avram Date: Fri, 25 Jan 2019 12:10:17 +0100 Subject: [PATCH 3/8] updated yarn lock --- yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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" From e4237198562cde522dc00b41b99356759a37cc37 Mon Sep 17 00:00:00 2001 From: Silviu Avram Date: Fri, 25 Jan 2019 12:10:26 +0100 Subject: [PATCH 4/8] updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 55d86f73f5..a8849f3a95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,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)) +- Highlights 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) From ee9100f95d91cafbd2788016398d8155df7c6e6f Mon Sep 17 00:00:00 2001 From: Silviu Avram Date: Fri, 25 Jan 2019 12:26:57 +0100 Subject: [PATCH 5/8] moved the change to fixes --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a8849f3a95..b1eb7dad56 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 - 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)) - Highlights selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) +- 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) From bbe4d6ea9e5c46d352f0dabd0c15891c58b6bbca Mon Sep 17 00:00:00 2001 From: Silviu Avram Date: Mon, 28 Jan 2019 21:42:53 +0100 Subject: [PATCH 6/8] fixed rebase issue in changelog --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b1eb7dad56..407650bcac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,7 +39,6 @@ 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)) -- Highlights selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) - Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) From caa5ebb67c94b2ae22315382d1f36b171332c0a1 Mon Sep 17 00:00:00 2001 From: Silviu Avram Date: Tue, 29 Jan 2019 14:45:30 +0100 Subject: [PATCH 7/8] added explanatory comment on state defaultHighlightedIndex --- src/components/Dropdown/Dropdown.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 36d8a64342..80fb2e5abb 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -229,6 +229,7 @@ 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, } } From b18215aea7229509a3a9b8c1590a540f17e135aa Mon Sep 17 00:00:00 2001 From: Silviu Avram Date: Tue, 29 Jan 2019 16:01:37 +0100 Subject: [PATCH 8/8] moved the logic from state reducer to onchange --- src/components/Dropdown/Dropdown.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 80fb2e5abb..c0b2332a44 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -523,14 +523,6 @@ export default class Dropdown extends AutoControlledComponent< if (state.isOpen && document.activeElement === this.listRef.current) { return {} // won't change state in this case. } - case Downshift.stateChangeTypes.clickItem: - case Downshift.stateChangeTypes.keyDownEnter: - if (!this.props.search && !this.props.multiple) { - this.setState({ - defaultHighlightedIndex: state.highlightedIndex, - }) - } - return changes default: return changes } @@ -715,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)) }