diff options
author | Saturnino Abril <saturnino.abril@gmail.com> | 2017-03-04 03:20:06 +0900 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2017-03-03 15:20:06 -0300 |
commit | 74c1fbbcf76157493bf29ac25923f612efb0782d (patch) | |
tree | e74440d704e566c6cb0c3f0855099c42ed27b31a /webapp/components/search_bar.jsx | |
parent | f37c03a75f745f00d13b91140a9e6fb9a8d5799a (diff) | |
download | chat-74c1fbbcf76157493bf29ac25923f612efb0782d.tar.gz chat-74c1fbbcf76157493bf29ac25923f612efb0782d.tar.bz2 chat-74c1fbbcf76157493bf29ac25923f612efb0782d.zip |
Mobile Web: Auto-focus cursor in the search box (#5284)
* Mobile Web: Auto-focus cursor in the search box and open keyboard when the search icon is tapped
* fixed issue with safari mobile view
* added isFocus props to search_bar.jsx component
* used 'x' and fixed spacing
* changed 'x' icon and fixed css
* added aria-hidden='true'
Diffstat (limited to 'webapp/components/search_bar.jsx')
-rw-r--r-- | webapp/components/search_bar.jsx | 32 |
1 files changed, 26 insertions, 6 deletions
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index 4296d6da9..1c9f607e6 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -54,6 +54,12 @@ export default class SearchBar extends React.Component { componentDidMount() { SearchStore.addSearchTermChangeListener(this.onListenerChange); this.mounted = true; + + if (Utils.isMobile()) { + setTimeout(() => { + document.querySelector('.app__body .sidebar--menu').classList.remove('visible'); + }); + } } componentWillUnmount() { @@ -76,6 +82,12 @@ export default class SearchBar extends React.Component { handleClose(e) { e.preventDefault(); + if (Utils.isMobile()) { + setTimeout(() => { + document.querySelector('.app__body .sidebar--menu').classList.add('visible'); + }); + } + AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_SEARCH, results: null @@ -261,7 +273,7 @@ export default class SearchBar extends React.Component { ); } - let clearClass = 'sidebar__clear-icon'; + let clearClass = 'sidebar__search-clear'; if (!this.state.isSearching && this.state.searchTerm && this.state.searchTerm.trim() !== '') { clearClass += ' visible'; } @@ -295,13 +307,19 @@ export default class SearchBar extends React.Component { listComponent={SearchSuggestionList} providers={this.suggestionProviders} type='search' + autoFocus={this.props.isFocus} /> - <span + <div className={clearClass} onClick={this.handleClear} > - <i className='fa fa-times'/> - </span> + <span + className='sidebar__search-clear-x' + aria-hidden='true' + > + {'×'} + </span> + </div> {isSearching} {this.renderHintPopover(helpClass)} </form> @@ -314,10 +332,12 @@ export default class SearchBar extends React.Component { } SearchBar.defaultProps = { - showMentionFlagBtns: true + showMentionFlagBtns: true, + isFocus: false }; SearchBar.propTypes = { showMentionFlagBtns: React.PropTypes.bool, - isCommentsPage: React.PropTypes.bool + isCommentsPage: React.PropTypes.bool, + isFocus: React.PropTypes.bool }; |