Ensure SearchInput retains value when open and clears when closed (firefox-devtools#5399)

Author: darkwing

src/components/Editor/SearchBar.js

@@ -51,7 +51,8 @@ type State = {
   query: string,
   selectedResultIndex: number,
   count: number,
-  index: number
+  index: number,
+  inputFocused: boolean
 };
 
 type Props = {
@@ -77,7 +78,8 @@ class SearchBar extends Component<Props, State> {
       query: props.query,
       selectedResultIndex: 0,
       count: 0,
-      index: -1
+      index: -1,
+      inputFocused: false
     };
   }
 
@@ -136,13 +138,13 @@ class SearchBar extends Component<Props, State> {
 
   closeSearch = (e: SyntheticEvent<HTMLElement>) => {
     const { editor, searchOn } = this.props;
-
     if (editor && searchOn) {
       this.clearSearch();
       this.props.closeFileSearch(editor);
       e.stopPropagation();
       e.preventDefault();
     }
+    this.setState({ query: "", inputFocused: false });
   };
 
   toggleSearch = (e: SyntheticKeyboardEvent<HTMLElement>) => {
@@ -155,10 +157,13 @@ class SearchBar extends Component<Props, State> {
     }
 
     if (this.props.searchOn && editor) {
-      const selection = editor.codeMirror.getSelection();
-      this.setState({ query: selection });
-      if (selection !== "") {
-        this.doSearch(selection);
+      const query = editor.codeMirror.getSelection() || this.state.query;
+
+      if (query !== "") {
+        this.setState({ query, inputFocused: true });
+        this.doSearch(query);
+      } else {
+        this.setState({ query: "", inputFocused: true });
       }
     }
   };
@@ -203,6 +208,10 @@ class SearchBar extends Component<Props, State> {
     return this.doSearch(e.target.value);
   };
 
+  onBlur = (e: SyntheticFocusEvent<HTMLElement>) => {
+    this.setState({ inputFocused: false });
+  };
+
   onKeyDown = (e: SyntheticKeyboardEvent<HTMLElement>) => {
     if (e.key !== "Enter" && e.key !== "F3") {
       return;
@@ -299,11 +308,13 @@ class SearchBar extends Component<Props, State> {
           placeholder={L10N.getStr("sourceSearch.search.placeholder")}
           summaryMsg={this.buildSummaryMsg()}
           onChange={this.onChange}
+          onBlur={this.onBlur}
           showErrorEmoji={this.shouldShowErrorEmoji()}
           onKeyDown={this.onKeyDown}
           handleNext={e => this.traverseResults(e, false)}
           handlePrev={e => this.traverseResults(e, true)}
           handleClose={this.closeSearch}
+          shouldFocus={this.state.inputFocused}
         />
         <div className="search-bottom-bar">{this.renderSearchModifiers()}</div>
       </div>

src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap

@@ -10,11 +10,13 @@ exports[`SearchBar should render 1`] = `
     handleNext={[Function]}
     handlePrev={[Function]}
     hasPrefix={false}
+    onBlur={[Function]}
     onChange={[Function]}
     onKeyDown={[Function]}
     placeholder="Search in file…"
     query=""
     selectedItemId=""
+    shouldFocus={false}
     showErrorEmoji={false}
     size=""
     summaryMsg=""
@@ -66,11 +68,13 @@ exports[`showErrorEmoji false if no query + no results 1`] = `
     handleNext={[Function]}
     handlePrev={[Function]}
     hasPrefix={false}
+    onBlur={[Function]}
     onChange={[Function]}
     onKeyDown={[Function]}
     placeholder="Search in file…"
     query=""
     selectedItemId=""
+    shouldFocus={false}
     showErrorEmoji={false}
     size=""
     summaryMsg=""
@@ -120,11 +124,13 @@ exports[`showErrorEmoji false if query + results 1`] = `
     handleNext={[Function]}
     handlePrev={[Function]}
     hasPrefix={false}
+    onBlur={[Function]}
     onChange={[Function]}
     onKeyDown={[Function]}
     placeholder="Search in file…"
     query="test"
     selectedItemId=""
+    shouldFocus={false}
     showErrorEmoji={false}
     size=""
     summaryMsg="-NaN of 10 results"
@@ -174,11 +180,13 @@ exports[`showErrorEmoji true if query + no results 1`] = `
     handleNext={[Function]}
     handlePrev={[Function]}
     hasPrefix={false}
+    onBlur={[Function]}
     onChange={[Function]}
     onKeyDown={[Function]}
     placeholder="Search in file…"
     query="test"
     selectedItemId=""
+    shouldFocus={false}
     showErrorEmoji={true}
     size=""
     summaryMsg="No results"

src/components/shared/SearchInput.js

@@ -29,6 +29,7 @@ const arrowBtn = (onClick, type, className, tooltip) => {
 type Props = {
   count: number,
   expanded: boolean,
+  shouldFocus?: boolean,
   handleClose: (e: SyntheticMouseEvent<HTMLDivElement>) => void,
   handleNext?: (e: SyntheticMouseEvent<HTMLButtonElement>) => void,
   handlePrev?: (e: SyntheticMouseEvent<HTMLButtonElement>) => void,
@@ -57,6 +58,16 @@ class SearchInput extends Component<Props> {
   };
 
   componentDidMount() {
+    this.setFocus();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.shouldFocus && !prevProps.shouldFocus) {
+      this.setFocus();
+    }
+  }
+
+  setFocus() {
     if (this.$input) {
       const input = this.$input;
       input.focus();