diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/search_bar.jsx | 61 | ||||
-rw-r--r-- | webapp/components/suggestion/suggestion_box.jsx | 2 |
2 files changed, 28 insertions, 35 deletions
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index a6fd379ac..a7e9bfcac 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -104,7 +104,6 @@ export default class SearchBar extends React.Component { SearchStore.storeSearchTerm(term); SearchStore.emitSearchTermChange(false); this.setState({searchTerm: term}); - this.refs.searchOverlay.hide(); } handleUserBlur() { @@ -112,9 +111,8 @@ export default class SearchBar extends React.Component { } handleUserFocus() { - $('.search-bar__container').addClass('focused'); - this.setState({focused: true}); + $('.search-bar__container').addClass('focused'); } performSearch(terms, isMentionSearch) { @@ -180,6 +178,11 @@ export default class SearchBar extends React.Component { isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>; } + let helpClass = 'search-help-popover'; + if (!this.state.searchTerm && this.state.focused) { + helpClass += ' visible'; + } + const recentMentionsTooltip = ( <Tooltip id='recentMentionsTooltip'> <FormattedMessage @@ -189,19 +192,6 @@ export default class SearchBar extends React.Component { </Tooltip> ); - const searchPopover = ( - <Popover - id='searchbar-help-popup' - placement='bottom' - className='search-help-popover' - > - <FormattedHTMLMessage - id='search_bar.usage' - defaultMessage='<h4>Search Options</h4><ul><li><span>Use </span><b>"quotation marks"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>' - /> - </Popover> - ); - const flaggedTooltip = ( <Tooltip id='flaggedTooltip'> <FormattedMessage @@ -285,28 +275,29 @@ export default class SearchBar extends React.Component { autoComplete='off' > <span className='fa fa-search sidebar__search-icon'/> - <OverlayTrigger - ref='searchOverlay' - delayShow={Constants.OVERLAY_TIME_DELAY_SMALL} + <SuggestionBox + ref='search' + className='form-control search-bar' + placeholder={Utils.localizeMessage('search_bar.search', 'Search')} + value={this.state.searchTerm} + onFocus={this.handleUserFocus} + onBlur={this.handleUserBlur} + onChange={this.handleChange} + listComponent={SearchSuggestionList} + providers={this.suggestionProviders} + type='search' + /> + {isSearching} + <Popover + id='searchbar-help-popup' placement='bottom' - overlay={searchPopover} - trigger='click' - rootClose={true} + className={helpClass} > - <SuggestionBox - ref='search' - className='form-control search-bar' - placeholder={Utils.localizeMessage('search_bar.search', 'Search')} - value={this.state.searchTerm} - onFocus={this.handleUserFocus} - onBlur={this.handleUserBlur} - onChange={this.handleChange} - listComponent={SearchSuggestionList} - providers={this.suggestionProviders} - type='search' + <FormattedHTMLMessage + id='search_bar.usage' + defaultMessage='<h4>Search Options</h4><ul><li><span>Use </span><b>"quotation marks"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>' /> - </OverlayTrigger> - {isSearching} + </Popover> </form> {mentionBtn} diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx index b3f9843c6..fb55b0588 100644 --- a/webapp/components/suggestion/suggestion_box.jsx +++ b/webapp/components/suggestion/suggestion_box.jsx @@ -64,6 +64,7 @@ export default class SuggestionBox extends React.Component { // Delay this slightly so that we don't clear the suggestions before we run click handlers on SuggestionList GlobalActions.emitClearSuggestions(this.suggestionId); }, 100); + this.props.onBlur(); } handleChange(e) { @@ -272,6 +273,7 @@ SuggestionBox.propTypes = { renderDividers: React.PropTypes.bool, // explicitly name any input event handlers we override and need to manually call + onBlur: React.PropTypes.func, onChange: React.PropTypes.func, onKeyDown: React.PropTypes.func, onItemSelected: React.PropTypes.func |