From a92615d5efa2c6c29b17f47019e3c091da2262b2 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 18:04:06 +0530 Subject: [PATCH 1/4] AS#111383418066580, Autocomplete the search text on forward arrow key -- Added desired behaviour --- components/SearchBar/SearchBar.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 51188942a..2ebc27d8f 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -98,6 +98,11 @@ class SearchBar extends Component { this.setState({ searchState: 'filled' }, function() { this.search() }) + } else if (eventKey === 39) { // right arrow key is pressed + const suggestion = this.state.suggestions[0] + this.refs.searchValue.value = suggestion + // trigger the change event handler + this.onChange() } } From a7c219eace15198d4a41e1be736e1ad0f87e1f06 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 18:06:56 +0530 Subject: [PATCH 2/4] AS#111383418066580, Autocomplete the search text on forward arrow key -- Handled case where there was no search suggestion --- components/SearchBar/SearchBar.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 2ebc27d8f..03ddea857 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -99,10 +99,12 @@ class SearchBar extends Component { this.search() }) } else if (eventKey === 39) { // right arrow key is pressed - const suggestion = this.state.suggestions[0] - this.refs.searchValue.value = suggestion - // trigger the change event handler - this.onChange() + const suggestion = this.state.suggestions.length > 0 ? this.state.suggestions[0] : null + if (suggestion) { + this.refs.searchValue.value = suggestion + // trigger the change event handler + this.onChange() + } } } From 97c9087fc6ede55a969de18df97733b9b9d5d48e Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 13 Apr 2016 23:22:30 +0530 Subject: [PATCH 3/4] AS#111383418066583, Support arrow navigation for moving between suggested terms in SearchBar -- Added up down arrow key behaviour. Need to do some more testing and cleanup --- components/SearchBar/SearchBar.jsx | 34 +++++++++++++++++-- .../SearchSuggestions/SearchSuggestions.jsx | 19 +++++++---- .../SearchSuggestions/SearchSuggestions.scss | 4 +++ 3 files changed, 48 insertions(+), 9 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 03ddea857..201687c52 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -58,7 +58,7 @@ class SearchBar extends Component { handleSuggestionsUpdate(requestNo, data) { if (requestNo === this.state.maxRequestNo) { - this.setState({loading: false, suggestions: data}) + this.setState({loading: false, suggestions: data, selectedSuggestionIdx: null}) } } @@ -71,7 +71,8 @@ class SearchBar extends Component { searchValue: this.refs.searchValue.value, requestNo: rc, maxRequestNo: rc, - loading: true + loading: true, + searchState: 'focused' } }, function() { @@ -93,6 +94,8 @@ class SearchBar extends Component { onKeyUp(evt) { const eventKey = evt.keyCode + evt.stopPropagation() + evt.preventDefault() // if return is pressed if (eventKey === 13) { this.setState({ searchState: 'filled' }, function() { @@ -105,6 +108,31 @@ class SearchBar extends Component { // trigger the change event handler this.onChange() } + } else if (eventKey === 38) { // up arrow key + const currSelectedIdx = this.state.selectedSuggestionIdx + if (currSelectedIdx) { // index is none of (undefined, null, 0) + const suggestionIdx = currSelectedIdx - 1 + const suggestion = this.state.suggestions[suggestionIdx] + this.refs.searchValue.value = suggestion + this.setState({ + selectedSuggestionIdx : suggestionIdx, + searchValue: suggestion + }) + } + } else if (eventKey === 40) { // down arrow key + const currSelectedIdx = this.state.selectedSuggestionIdx + // index is none of (undefined, null, 0) + if (typeof currSelectedIdx === 'undefined' + || currSelectedIdx === null + || this.state.suggestions.length > currSelectedIdx + 1) { + const suggestionIdx = typeof currSelectedIdx === 'number' ? currSelectedIdx + 1 : 0 + const suggestion = this.state.suggestions[suggestionIdx] + this.refs.searchValue.value = suggestion + this.setState({ + selectedSuggestionIdx: suggestionIdx, + searchValue: suggestion + }) + } } } @@ -147,7 +175,7 @@ class SearchBar extends Component { const results = this.state.loading === true ?
- : + : return (
diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index fca906a37..3b9a68551 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -23,15 +23,18 @@ class SearchSuggestions extends Component { render() { const recentList = this.props.recentSearch const popularList = this.props.popularSearch - const suggestionItem = (term, i) => { let labelDOM = term const searchTerm = this.props.searchTerm + let exactMatch = false if (searchTerm.length > 0) { const idx = term.toLowerCase().indexOf(searchTerm.toLowerCase()) if (idx !== -1) { + // check if exact match + exactMatch = idx === 0 && term.length === searchTerm.length + // prepare DOM for the content to be rendered under StandardListItem labelDOM = ( - + { term.substring(0, idx) } { searchTerm } { term.substring(idx + searchTerm.length) } @@ -39,9 +42,13 @@ class SearchSuggestions extends Component { ) } } - + // prepares css class for li + const itemClasses = classNames( + { 'selected' : exactMatch } + ) + // prepares and returns the DOM for each popular/recent search item return ( -
  • +
    • ) @@ -105,13 +112,13 @@ class SearchSuggestions extends Component { SearchSuggestions.propTypes = { onSuggestionSelect : PropTypes.func.isRequired, recentSearch : PropTypes.array, - popularSearch : PropTypes.array, + popularSearch : PropTypes.array, searchTerm : PropTypes.string } SearchSuggestions.defaultProps = { recentSearch : [], - popularSearch : [], + popularSearch : [], searchTerm : '' } diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index 5ef8af091..52668c273 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -68,6 +68,10 @@ padding: 0; padding-bottom: 5px; + li.selected { + background-color: $gray-light; + } + .StandardListItem { align-items: initial; text-align: left; From 0e6bedf5795a0ea700a05711611202af669c3aa3 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 14 Apr 2016 10:23:36 +0530 Subject: [PATCH 4/4] AS#111383418066583, Support arrow navigation for moving between suggested terms in SearchBar -- Fixed lint errors --- components/SearchSuggestions/SearchSuggestions.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index 3b9a68551..98b4eba6f 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -44,7 +44,7 @@ class SearchSuggestions extends Component { } // prepares css class for li const itemClasses = classNames( - { 'selected' : exactMatch } + { selected : exactMatch } ) // prepares and returns the DOM for each popular/recent search item return (