diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index 2e9764bd9a..bf12ca1608 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -8,6 +8,7 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; +var Tooltip = ReactBootstrap.Tooltip; export default class SearchBar extends React.Component { constructor() { @@ -16,10 +17,14 @@ export default class SearchBar extends React.Component { this.onListenerChange = this.onListenerChange.bind(this); this.handleUserInput = this.handleUserInput.bind(this); + this.handleUserFocus = this.handleUserFocus.bind(this); + this.handleUserBlur = this.handleUserBlur.bind(this); this.performSearch = this.performSearch.bind(this); this.handleSubmit = this.handleSubmit.bind(this); - this.state = this.getSearchTermStateFromStores(); + const state = this.getSearchTermStateFromStores(); + state.focused = false; + this.state = state; } getSearchTermStateFromStores() { var term = PostStore.getSearchTerm() || ''; @@ -78,9 +83,14 @@ export default class SearchBar extends React.Component { handleMouseInput(e) { e.preventDefault(); } + handleUserBlur() { + this.setState({focused: false}); + } handleUserFocus(e) { e.target.select(); $('.search-bar__container').addClass('focused'); + + this.setState({focused: true}); } performSearch(terms, isMentionSearch) { if (terms.length) { @@ -115,6 +125,12 @@ export default class SearchBar extends React.Component { if (this.state.isSearching) { isSearching = ; } + + let helpClass = 'search-help-popover'; + if (!this.state.searchTerm && this.state.focused) { + helpClass += ' visible'; + } + return (