From 2e8394cb36d7b169475a351451c10a915ab68eec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Tue, 26 Feb 2019 02:33:40 -0800
Subject: [PATCH] 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 |  1 +
 src/plugins/layout/layout2/Search.js    | 37 +++++++++++++------------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/plugins/layout/layout2/Inspector.js b/src/plugins/layout/layout2/Inspector.js
index 6a916e6a4..e3e8a807c 100644
--- a/src/plugins/layout/layout2/Inspector.js
+++ b/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()}
diff --git a/src/plugins/layout/layout2/Search.js b/src/plugins/layout/layout2/Search.js
index 8262f8c72..d17518640 100644
--- a/src/plugins/layout/layout2/Search.js
+++ b/src/plugins/layout/layout2/Search.js
@@ -5,8 +5,8 @@
  * @format
  */
 
-import type {PluginClient, ElementSearchResultSet} from 'flipper';
-import type {PersistedState} from './';
+import type {PluginClient, ElementSearchResultSet, Element} from 'flipper';
+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({
-      value: e.target.value,
-    });
-    this.timer = setTimeout(() => this.performSearch(e.target.value), 200);
+    const {value} = e.target;
+    this.setState({value});
+    this.timer = setTimeout(() => this.performSearch(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 expandedElements = elements.reduce(
-      (acc, {element}) => ({
+    const searchResults = this.getElementsFromSearchResultTree(results);
+    const searchResultIDs = new Set(searchResults.map(r => r.element.id));
+    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({
-      elements: {
-        ...this.props.persistedState.elements,
-        ...expandedElements,
-      },
-    });
+    this.props.setPersistedState({elements});
 
     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,
     });
   }