Bug 2012474 - Persist the project search exclude patterns as they are edited. r?bomsy

devtools/client/shared/components/SearchInput.js

@@ -20,6 +20,7 @@ const DebuggerImage = require("devtools/client/shared/components/DebuggerImage")
 const CloseButton = require("devtools/client/shared/components/CloseButton");
 
 const classnames = require("resource://devtools/client/shared/classnames.js");
+const { debounce } = require("resource://devtools/shared/debounce.js");
 const SearchModifiers = require("resource://devtools/client/shared/components/SearchModifiers.js");
 
 const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
@@ -95,6 +96,12 @@ class SearchInput extends Component {
         ? (props.searchOptions?.excludePatterns ?? "")
         : null,
     };
+    // Persist the exclude patterns while the user types, without dispatching
+    // on every keystroke.
+    this.debouncedSetExcludePatterns = debounce(
+      excludePatterns => this.setExcludePatterns(excludePatterns),
+      200
+    );
   }
 
   componentDidMount() {
@@ -107,6 +114,10 @@ class SearchInput extends Component {
     }
   }
 
+  componentWillUnmount() {
+    this.debouncedSetExcludePatterns.cancel();
+  }
+
   setFocus() {
     if (this.$input) {
       const _input = this.$input;
@@ -198,13 +209,29 @@ class SearchInput extends Component {
 
   onExcludeKeyDown = e => {
     if (e.key === "Enter") {
-      this.props.setSearchOptions(this.props.searchKey, {
-        excludePatterns: this.state.excludePatterns,
-      });
+      this.setExcludePatterns(this.state.excludePatterns);
       this.props.onKeyDown(e);
     }
   };
 
+  onExcludeChange = e => {
+    const excludePatterns = e.target.value;
+    this.setState({ excludePatterns });
+    this.debouncedSetExcludePatterns(excludePatterns);
+  };
+
+  onExcludeBlur = () => {
+    this.setExcludePatterns(this.state.excludePatterns);
+  };
+
+  setExcludePatterns(excludePatterns) {
+    this.debouncedSetExcludePatterns.cancel();
+    if (this.props.searchOptions?.excludePatterns === excludePatterns) {
+      return;
+    }
+    this.props.setSearchOptions(this.props.searchKey, { excludePatterns });
+  }
+
   saveEnteredTerm(query) {
     const { history } = this.state;
     const previousIndex = history.indexOf(query);
@@ -279,10 +306,8 @@ class SearchInput extends Component {
         placeholder: this.props.excludePatternsPlaceholder,
         value: this.state.excludePatterns,
         onKeyDown: this.onExcludeKeyDown,
-        onChange: e =>
-          this.setState({
-            excludePatterns: e.target.value,
-          }),
+        onChange: this.onExcludeChange,
+        onBlur: this.onExcludeBlur,
       })
     );
   }