From ab582ed7a53d344ae7ea937ef1b8c7bc4005c99b Mon Sep 17 00:00:00 2001
From: jongsue hong <jongsue777@gmail.com>
Date: Tue, 12 Feb 2019 01:19:20 +0900
Subject: [PATCH] fix(Dropdown): retain focus on the input if the Dropdown
receives a click (#3422)
* fix(Dropdown): retain focus on the input if the Dropdown root element receives a click.
* add a test case
* Update Dropdown-test.js
* Update Dropdown.js
* Update Dropdown.js
---
src/modules/Dropdown/Dropdown.js | 5 ++++-
test/specs/modules/Dropdown/Dropdown-test.js | 11 +++++++++++
2 files changed, 15 insertions(+), 1 deletion(-)
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 4bbc4ae42e..2afe232e42 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -691,7 +691,10 @@ export default class Dropdown extends Component {
e.stopPropagation()
if (!search) return this.toggle(e)
- if (open) return
+ if (open) {
+ if (this.searchRef) this.searchRef.focus()
+ return
+ }
if (searchQuery.length >= minCharacters || minCharacters === 1) {
this.open(e)
return
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 90f649db63..37d23e2249 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -1957,6 +1957,17 @@ describe('Dropdown', () => {
)
})
+ it('sets focus to the search input on click Dropdown when is opened', () => {
+ wrapperMount(<Dropdown open options={options} multiple selection search />)
+ wrapper.simulate('click')
+
+ const activeElement = document.activeElement
+ const searchIsFocused = activeElement === document.querySelector('input.search')
+ searchIsFocused.should.be.true(
+ `Expected "input.search" to be the active element but found ${activeElement} instead.`,
+ )
+ })
+
it('clears the search query when an item is selected', () => {
// search for random item
const searchQuery = _.sample(options).text