diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx index ee393e534..8cab6b398 100644 --- a/desktop/plugins/public/ui-debugger/components/Tree.tsx +++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx @@ -98,6 +98,14 @@ export function Tree2({nodes, rootId}: {nodes: Map; rootId: Id}) { overscan: 20, }); + useEffect(() => { + const matchingIndexes = findSearchMatchingIndexes(treeNodes, searchTerm); + + if (matchingIndexes.length > 0) { + rowVirtualizer.scrollToIndex(matchingIndexes[0], {align: 'start'}); + } + }, [rowVirtualizer, searchTerm, treeNodes]); + useKeyboardShortcuts( treeNodes, rowVirtualizer, @@ -799,3 +807,23 @@ function extendKBControlLease( isUsingKBToScrollUntil.current = new Date().getTime() + KBScrollOverrideTimeMS; } + +//due to virtualisation the out of the box dom based scrolling doesnt work +function findSearchMatchingIndexes( + treeNodes: TreeNode[], + searchTerm: string, +): number[] { + if (!searchTerm) { + return []; + } + return treeNodes + .map((value, index) => [value, index] as [TreeNode, number]) + .filter( + ([value, _]) => + value.name.toLowerCase().includes(searchTerm) || + Object.values(value.inlineAttributes).find((inlineAttr) => + inlineAttr.toLocaleLowerCase().includes(searchTerm), + ), + ) + .map(([_, index]) => index); +}