MM-12760: No heading on from: search filter. (#2016)

components/search_bar/search_bar.jsx

@@ -276,6 +276,7 @@ export default class SearchBar extends React.Component {
  type='search'
  autoFocus={this.props.isFocus && this.props.searchTerms === ''}
  delayInputUpdate={true}
+ renderDividers={true}
  />
  <div
  id='searchClearButton'

components/suggestion/search_suggestion_list.jsx

@@ -70,13 +70,15 @@ export default class SearchSuggestionList extends SuggestionList {
  const Component = this.props.components[i];
 
  // temporary hack to add dividers between public and private channels in the search suggestion list
- if (i === 0 || item.type !== this.props.items[i - 1].type) {
- if (item.type === Constants.OPEN_CHANNEL) {
- items.push(this.renderChannelDivider(Constants.OPEN_CHANNEL));
- } else if (item.type === Constants.PRIVATE_CHANNEL) {
- items.push(this.renderChannelDivider(Constants.PRIVATE_CHANNEL));
- } else if (i === 0 || this.props.items[i - 1].type === Constants.OPEN_CHANNEL || this.props.items[i - 1].type === Constants.PRIVATE_CHANNEL) {
- items.push(this.renderChannelDivider(Constants.DM_CHANNEL));
+ if (this.props.renderDividers) {
+ if (i === 0 || item.type !== this.props.items[i - 1].type) {
+ if (item.type === Constants.OPEN_CHANNEL) {
+ items.push(this.renderChannelDivider(Constants.OPEN_CHANNEL));
+ } else if (item.type === Constants.PRIVATE_CHANNEL) {
+ items.push(this.renderChannelDivider(Constants.PRIVATE_CHANNEL));
+ } else if (i === 0 || this.props.items[i - 1].type === Constants.OPEN_CHANNEL || this.props.items[i - 1].type === Constants.PRIVATE_CHANNEL) {
+ items.push(this.renderChannelDivider(Constants.DM_CHANNEL));
+ }
  }
  }
 

components/suggestion/suggestion_box.jsx

@@ -142,6 +142,12 @@ export default class SuggestionBox extends React.Component {
 
  this.pretext = '';
 
+ // An override of the provided prop to indicate whether dividers should be shown in the autocomplete results.
+ // This isn't ideal, because the component accepts a `renderDividers` prop which this is being used to override
+ // on a per-provider basis. There's probably a better solution by re-architecting providers to control how their
+ // dividers work on a per-provider basis so this wouldn't be necessary.
+ this.allowDividers = true;
+
  // pretext: the text before the cursor
  // matchedPretext: a list of the text before the cursor that will be replaced if the corresponding autocomplete term is selected
  // terms: a list of strings which the previously typed text may be replaced by
@@ -484,6 +490,12 @@ export default class SuggestionBox extends React.Component {
  this.presentationType = 'text';
  }
 
+ if (provider.constructor.name === 'SearchUserProvider') {
+ this.allowDividers = false;
+ } else {
+ this.allowDividers = true;
+ }
+
  break;
  }
  }
@@ -517,11 +529,12 @@ export default class SuggestionBox extends React.Component {
  listComponent,
  dateComponent,
  listStyle,
- renderDividers,
  renderNoResults,
  ...props
  } = this.props;
 
+ const renderDividers = this.props.renderDividers && this.allowDividers;
+
  // Don't pass props used by SuggestionBox
  Reflect.deleteProperty(props, 'providers');
  Reflect.deleteProperty(props, 'onChange'); // We use onInput instead of onChange on the actual input
@@ -535,6 +548,7 @@ export default class SuggestionBox extends React.Component {
  Reflect.deleteProperty(props, 'onBlur');
  Reflect.deleteProperty(props, 'containerClass');
  Reflect.deleteProperty(props, 'replaceAllInputOnSelect');
+ Reflect.deleteProperty(props, 'renderDividers');
 
  // This needs to be upper case so React doesn't think it's an html tag
  const SuggestionListComponent = listComponent;