diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index 03825e96..9182ecca 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -112,6 +112,15 @@ function Sidebar({ className }: { className?: string }) { treeRef.current?.selectItem(payload.model.id, true); }); + useEffect(() => { + return jotaiStore.sub(activeIdAtom, () => { + const activeId = jotaiStore.get(activeIdAtom); + if (activeId) { + treeRef.current?.selectItem(activeId, true); + } + }); + }, [focusActiveItem]); + useHotKey( 'sidebar.filter', () => { @@ -489,7 +498,7 @@ function Sidebar({ className }: { className?: string }) { , onSelect: () => { const activeId = jotaiStore.get(activeIdAtom); @@ -508,7 +517,8 @@ function Sidebar({ className }: { className?: string }) { } return n; }); - treeRef.current?.selectItem(activeId, true); + treeRef.current?.selectItem(activeId, false); + treeRef.current?.focus(); }, }, { diff --git a/src-web/components/core/tree/Tree.tsx b/src-web/components/core/tree/Tree.tsx index e70636b7..2b91e287 100644 --- a/src-web/components/core/tree/Tree.tsx +++ b/src-web/components/core/tree/Tree.tsx @@ -130,7 +130,8 @@ function TreeInner( if ($el == null) { return false; } else { - $el?.focus(); + $el.focus(); + $el.scrollIntoView({ block: 'nearest' }); return true; } }, []); diff --git a/src-web/components/core/tree/TreeItem.tsx b/src-web/components/core/tree/TreeItem.tsx index 63e8b001..35c96fe1 100644 --- a/src-web/components/core/tree/TreeItem.tsx +++ b/src-web/components/core/tree/TreeItem.tsx @@ -10,7 +10,7 @@ import { jotaiStore } from '../../../lib/jotai'; import type { ContextMenuProps, DropdownItem } from '../Dropdown'; import { ContextMenu } from '../Dropdown'; import { Icon } from '../Icon'; -import { collapsedFamily, isCollapsedFamily, isLastFocusedFamily, isSelectedFamily } from './atoms'; +import { collapsedFamily, isCollapsedFamily, isLastFocusedFamily, isSelectedFamily, } from './atoms'; import type { TreeNode } from './common'; import { getNodeKey } from './common'; import type { TreeProps } from './Tree'; @@ -39,6 +39,7 @@ export interface TreeItemHandle { isRenaming: boolean; rect: () => DOMRect; focus: () => void; + scrollIntoView: () => void; } const HOVER_CLOSED_FOLDER_DELAY = 800; @@ -81,6 +82,9 @@ function TreeItem_({ } return listItemRef.current.getBoundingClientRect(); }, + scrollIntoView: () => { + listItemRef.current?.scrollIntoView({ block: 'nearest' }); + } }), [editing, getEditOptions], ); @@ -118,14 +122,6 @@ function TreeItem_({ y: number; } | null>(null); - useEffect( - () => - jotaiStore.sub(isSelectedFamily({ treeId, itemId: node.item.id }), () => { - listItemRef.current?.scrollIntoView({ block: 'nearest' }); - }), - [node.item.id, treeId], - ); - const handleClick = useCallback( (e: MouseEvent) => onClick?.(node.item, e), [node, onClick],