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 { 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 { 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 { : 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, }); }