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],