diff --git a/desktop/plugins/layout/Inspector.tsx b/desktop/plugins/layout/Inspector.tsx index f2a52a1f3..d528cd551 100644 --- a/desktop/plugins/layout/Inspector.tsx +++ b/desktop/plugins/layout/Inspector.tsx @@ -331,7 +331,7 @@ export default class Inspector extends Component { async getAndExpandPath(path: Array) { await Promise.all(path.map((id) => this.getChildren(id, {}))); - this.onElementSelected(path[path.length - 1]); + this.onElementSelected()(path[path.length - 1]); } getElementLeaves(tree: ElementSelectorNode): Array { @@ -376,9 +376,32 @@ export default class Inspector extends Component { this.getAndExpandPath(this.getPathForNode(tree, null) ?? []); } - onElementSelected = debounce((selectedKey: ElementID) => { - this.onElementHovered(selectedKey); - this.props.onSelect(selectedKey); + onElementSelected = (option?: { + cancelSelector?: boolean; + expandPathToElement?: boolean; + }) => + debounce(async (selectedKey: ElementID) => { + if (option?.cancelSelector) { + this.setState({elementSelector: null, axElementSelector: null}); + } + if (option?.expandPathToElement) { + const data = this.props.ax + ? this.state.axElementSelector + : this.state.elementSelector; + await this.getAndExpandPath( + this.getPathForNode(data?.tree ?? {}, selectedKey) ?? [], + ); + } + this.onElementHovered(selectedKey); + this.props.onSelect(selectedKey); + }); + + onElementSelectedAtMainSection = this.onElementSelected({ + cancelSelector: true, + }); + + onElementSelectedAndExpanded = this.onElementSelected({ + expandPathToElement: true, }); onElementHovered = debounce((key: ElementID | null | undefined) => { @@ -417,7 +440,7 @@ export default class Inspector extends Component { return this.root() ? ( { ) : null}