Search: add menu to AutosuggestInput

app/soapbox/components/autosuggest_input.js

@@ -52,6 +52,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     id: PropTypes.string,
     searchTokens: PropTypes.arrayOf(PropTypes.string),
     maxLength: PropTypes.number,
+    menu: PropTypes.arrayOf(PropTypes.object),
   };
 
   static defaultProps = {
@@ -87,9 +88,10 @@ export default class AutosuggestInput extends ImmutablePureComponent {
   }
 
   onKeyDown = (e) => {
-    const { suggestions, disabled } = this.props;
+    const { suggestions, menu, disabled } = this.props;
     const { selectedSuggestion, suggestionsHidden } = this.state;
     const firstIndex = this.getFirstIndex();
+    const lastIndex = suggestions.size + (menu || []).length - 1;
 
     if (disabled) {
       e.preventDefault();
@@ -113,14 +115,14 @@ export default class AutosuggestInput extends ImmutablePureComponent {
 
       break;
     case 'ArrowDown':
-      if (suggestions.size > 0 && !suggestionsHidden) {
+      if (!suggestionsHidden && (suggestions.size > 0 || menu)) {
         e.preventDefault();
-        this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
+        this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, lastIndex) });
       }
 
       break;
     case 'ArrowUp':
-      if (suggestions.size > 0 && !suggestionsHidden) {
+      if (!suggestionsHidden && (suggestions.size > 0 || menu)) {
         e.preventDefault();
         this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, firstIndex) });
       }
@@ -129,11 +131,17 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     case 'Enter':
     case 'Tab':
       // Select suggestion
-      if (suggestions.size > 0 && !suggestionsHidden && selectedSuggestion > -1) {
+      if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.size > 0 || menu)) {
         e.preventDefault();
         e.stopPropagation();
         this.setState({ selectedSuggestion: firstIndex });
-        this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
+
+        if (selectedSuggestion < suggestions.size) {
+          this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
+        } else {
+          const item = menu[selectedSuggestion - suggestions.size];
+          this.handleMenuItemAction(item);
+        }
       }
 
       break;
@@ -194,11 +202,47 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     );
   }
 
+  handleMenuItemAction = item => {
+    this.onBlur();
+    item.action();
+  }
+
+  handleMenuItemClick = item => {
+    return e => {
+      e.preventDefault();
+      this.handleMenuItemAction(item);
+    };
+  }
+
+  renderMenu = () => {
+    const { menu, suggestions } = this.props;
+    const { selectedSuggestion } = this.state;
+
+    if (!menu) {
+      return null;
+    }
+
+    return menu.map((item, i) => (
+      <a
+        className={classNames('autosuggest-input__action', { selected: suggestions.size - selectedSuggestion === i })}
+        href='#'
+        role='button'
+        tabIndex='0'
+        onMouseDown={this.handleMenuItemClick(item)}
+        key={i}
+      >
+        {item.text}
+      </a>
+    ));
+  };
+
   render() {
-    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength } = this.props;
+    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props;
     const { suggestionsHidden } = this.state;
     const style = { direction: 'ltr' };
 
+    const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
+
     if (isRtl(value)) {
       style.direction = 'rtl';
     }
@@ -228,8 +272,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
           />
         </label>
 
-        <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
+        <div className={classNames('autosuggest-textarea__suggestions', { 'autosuggest-textarea__suggestions--visible': visible })}>
           {suggestions.map(this.renderSuggestion)}
+          {this.renderMenu()}
         </div>
       </div>
     );

app/soapbox/features/compose/components/search.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
+  action: { id: 'search.action', defaultMessage: 'Search for “{query}”' },
 });
 
 export default @injectIntl
@@ -51,15 +52,18 @@ class Search extends React.PureComponent {
     }
   }
 
+  handleSubmit = () => {
+    this.props.onSubmit();
+
+    if (this.props.openInRoute) {
+      this.context.router.history.push('/search');
+    }
+  }
+
   handleKeyDown = (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
-
-      this.props.onSubmit();
-
-      if (this.props.openInRoute) {
-        this.context.router.history.push('/search');
-      }
+      this.handleSubmit();
     } else if (e.key === 'Escape') {
       document.querySelector('.ui').parentElement.focus();
     }
@@ -82,6 +86,14 @@ class Search extends React.PureComponent {
     }
   }
 
+  makeMenu = () => {
+    const { intl, value } = this.props;
+
+    return [
+      { text: intl.formatMessage(messages.action, { query: value }), action: this.handleSubmit },
+    ];
+  }
+
   render() {
     const { intl, value, autoFocus, autosuggest, submitted } = this.props;
     const hasValue = value.length > 0 || submitted;
@@ -104,6 +116,7 @@ class Search extends React.PureComponent {
             onSelected={this.handleSelected}
             autoFocus={autoFocus}
             autoSelect={false}
+            menu={this.makeMenu()}
           />
         </label>
         <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>

app/styles/autosuggest.scss

@@ -102,3 +102,17 @@
 .autosuggest-account .display-name__account {
   color: var(--primary-text-color--faint);
 }
+
+.autosuggest-input__action {
+  display: block;
+  padding: 10px;
+  border-radius: 4px;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--primary-text-color--faint);
+
+  &:hover,
+  &.selected {
+    background-color: var(--brand-color--med);
+  }
+}