Added showAllCommandsWhenNoneMatches boolean option

README.md

@@ -57,6 +57,8 @@ const commands = [{
 
 * ```open``` a _boolean_, when set to true it forces the command palette to be displayed. Defaults to "false".
 
+* ```showAllCommandsWhenNoneMatches``` a boolean, Set it to true if you'd like to render all suggestions when the input query matches none. Defaults to "true".
+
 * ```alwaysRenderCommands``` a boolean, Set it to true if you'd like to render suggestions even when the input is not focused.
 
 * ```display``` one of "modal" or "inline", when set to "modal" the command palette is rendered centered inside a modal. When set to "inline", it is render inline with other page content. Defaults to "modal".

src/command-palette.js

@@ -108,10 +108,8 @@ class CommandPalette extends React.Component {
     }
 
     if (!equal(prevProps.commands, commands)) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        suggestions: this.fetchData(),
-      });
+      this.fetchData(); // set this.allCommands
+      this.onSuggestionsFetchRequested({ value: this.state.value }); // updates matching suggestions
     }
   }
 
@@ -160,9 +158,9 @@ class CommandPalette extends React.Component {
   // Autosuggest will call this function every time you need to update suggestions.
   // You already implemented this logic above, so just use it.
   onSuggestionsFetchRequested({ value }) {
-    const { options, filterSearchQuery } = this.props;
+    const { options, filterSearchQuery, showAllCommandsWhenNoneMatches } = this.props;
     this.setState({
-      suggestions: getSuggestions(value, this.allCommands, options, filterSearchQuery),
+      suggestions: getSuggestions(value, this.allCommands, options, filterSearchQuery, showAllCommandsWhenNoneMatches),
     });
   }
 
@@ -367,6 +365,7 @@ class CommandPalette extends React.Component {
 }
 
 CommandPalette.defaultProps = {
+  showAllCommandsWhenNoneMatches: true,
   alwaysRenderCommands: true,
   placeholder: "Type a command",
   hotKeys: "command+shift+p",
@@ -393,6 +392,10 @@ CommandPalette.defaultProps = {
 };
 
 CommandPalette.propTypes = {
+  /** showAllCommandsWhenNoneMatches a boolean, Set it to true if you'd like to render all suggestions
+   * the input query matches none. Defaults to "true". */
+   showAllCommandsWhenNoneMatches: PropTypes.bool,
+
   /** alwaysRenderCommands a boolean, Set it to true if you'd like to render suggestions
    * even when the input is not focused. */
   alwaysRenderCommands: PropTypes.bool,

src/suggestions.js

@@ -32,7 +32,7 @@ function filterFuzzySortSearch(search, filterSearchQuery) {
 }
 
 // Teach Autosuggest how to calculate suggestions for any given input value.
-const getSuggestions = function (unfilteredSearch, allCommands, options, filterSearchQuery) {
+const getSuggestions = function (unfilteredSearch, allCommands, options, filterSearchQuery, showAllCommandsWhenNoneMatches) {
 
   const search = filterFuzzySortSearch(unfilteredSearch, filterSearchQuery);
 
@@ -45,13 +45,17 @@ const getSuggestions = function (unfilteredSearch, allCommands, options, filterS
   //   allCommands.forEach(s => (s.namePrepared = fuzzysort.prepare(s.name)));
   // });
 
+  // if the user didnt suggest a specific term or there's a search term
+  // but no matches were found return all the commands
+  if (!search) {
+    return allCommands;
+  }
+
   // If the user specified an autosuggest term
   // search for close matches
   const suggestionResults = fuzzysort.go(search, allCommands, options);
 
-  // if the user didnt suggest a specific term or there's a search term
-  // but no matches were found return all the commands
-  if (!search || !suggestionResults.length) {
+  if (showAllCommandsWhenNoneMatches && !suggestionResults.length) {
     return allCommands;
   }