diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/search_bar.jsx | 50 |
1 files changed, 31 insertions, 19 deletions
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index cfd9b0c73..bea722243 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -193,6 +193,19 @@ export default class SearchBar extends React.Component { </Tooltip> ); + const searchPopover = ( + <Popover + id='searchbar-help-popup' + placement='bottom' + className={helpClass} + > + <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 @@ -276,29 +289,28 @@ export default class SearchBar extends React.Component { autoComplete='off' > <span className='fa fa-search sidebar__search-icon'/> - <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' + <OverlayTrigger + delayShow={Constants.OVERLAY_TIME_DELAY_SMALL} placement='bottom' + overlay={searchPopover} + trigger='focus' + rootClose={true} className={helpClass} > - <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>' + <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' /> - </Popover> + </OverlayTrigger> + {isSearching} </form> {mentionBtn} |