fix search

Summary: Layout search was throwing errors before, now it's working. The problem was, the event object used in the `setTimeout`-callback was released, before the timeout fired and therefore was null.

Reviewed By: jknoxville

Differential Revision: D14209811

fbshipit-source-id: 2465241c376d3e709155830e796aa3b991cbd7de

src/plugins/layout/layout2/Inspector.js

@@ -216,6 +216,7 @@ export default class Inspector extends Component<Props> {
         onElementHovered={this.onElementHovered}
         onElementExpanded={this.onElementExpanded}
         onValueChanged={this.props.onDataValueChanged}
+        searchResults={this.props.searchResults}
         selected={this.selected()}
         root={this.root()}
         elements={this.elements()}

src/plugins/layout/layout2/Search.js

@@ -5,8 +5,8 @@
  * @format
  */
 
-import type {PluginClient, ElementSearchResultSet} from 'flipper';
+import type {PluginClient, ElementSearchResultSet, Element} from 'flipper';
-import type {PersistedState} from './';
+import type {PersistedState, ElementMap} from './';
 
 import {
   SearchInput,
@@ -56,10 +56,9 @@ export default class Search extends Component<Props, State> {
 
   onChange = (e: SyntheticInputEvent<>) => {
     clearTimeout(this.timer);
-    this.setState({
+    const {value} = e.target;
-      value: e.target.value,
+    this.setState({value});
-    });
+    this.timer = setTimeout(() => this.performSearch(value), 200);
-    this.timer = setTimeout(() => this.performSearch(e.target.value), 200);
   };
 
   onKeyDown = (e: SyntheticKeyboardEvent<>) => {
@@ -96,24 +95,26 @@ export default class Search extends Component<Props, State> {
           : this.state.outstandingSearchQuery,
     });
 
-    const elements = this.getElementsFromSearchResultTree(results);
+    const searchResults = this.getElementsFromSearchResultTree(results);
-    const expandedElements = elements.reduce(
+    const searchResultIDs = new Set(searchResults.map(r => r.element.id));
-      (acc, {element}) => ({
+    const elements: ElementMap = searchResults.reduce(
+      (acc: ElementMap, {element}: SearchResultTree) => ({
         ...acc,
-        [element.id]: {...element, expanded: true},
+        [element.id]: {
+          ...element,
+          // expand all search results, that we have have children for
+          expanded: element.children.some(c => searchResultIDs.has(c)),
+        },
       }),
-      {},
+      {...this.props.persistedState.elements},
     );
 
-    this.props.setPersistedState({
+    this.props.setPersistedState({elements});
-      elements: {
-        ...this.props.persistedState.elements,
-        ...expandedElements,
-      },
-    });
 
     this.props.onSearchResults({
-      matches: new Set(elements.filter(x => x.isMatch).map(x => x.element.id)),
+      matches: new Set(
+        searchResults.filter(x => x.isMatch).map(x => x.element.id),
+      ),
       query: query,
     });
   }