diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 4ce17d312a..456514df54 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4691,19 +4691,20 @@ export interface TreeNode {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
-| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
-| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id Only one node can be active |
-| children | No | let | No | Array | [] | Provide an array of children nodes to render |
-| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
-| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
-| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes. Expands all nodes if no argument is provided |
-| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes. Collapses all nodes if no argument is provided |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
+| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id Only one node can be active |
+| children | No | let | No | Array | [] | Provide an array of children nodes to render |
+| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
+| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
+| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes. Expands all nodes if no argument is provided |
+| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes. Collapses all nodes if no argument is provided |
+| showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); // Break out of the loop if the node is found. break; } } } | Programmatically show a node by `id`. The matching node will be expanded, selected, and focused |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d631b8eed6..6a1d816914 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -14664,6 +14664,18 @@
"isRequired": false,
"constant": false,
"reactive": false
+ },
+ {
+ "name": "showNode",
+ "kind": "function",
+ "description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused",
+ "type": "(id: TreeNodeId) => void",
+ "value": "() => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(`[id=\"${lastId}\"]`)?.focus(); }); // Break out of the loop if the node is found. break; } } }",
+ "isFunction": true,
+ "isFunctionDeclaration": true,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
}
],
"moduleExports": [],
diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index 112941793f..fc35f11066 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -92,4 +92,12 @@ Use the `TreeView.collapseNodes` method to collapse a subset of nodes.
If no argument is provided, all nodes will be collapsed.
-
\ No newline at end of file
+
+
+## Show a specific node
+
+Use the `TreeView.showNode` method to show a specific node.
+
+If a matching node is found, it will be expanded, selected, and focused.
+
+
diff --git a/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte b/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte
new file mode 100644
index 0000000000..4ce54f292d
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewShowNode.svelte
@@ -0,0 +1,49 @@
+
+
+
+ {#each [nodeSpark, nodeBlockchain] as { id, text }}
+
+ {/each}
+
+
+
+
diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index eabe6255de..0400102ab7 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -1,3 +1,31 @@
+
+
diff --git a/types/TreeView/TreeView.svelte.d.ts b/types/TreeView/TreeView.svelte.d.ts
index afabd0f1f0..6dbdfbf6fd 100644
--- a/types/TreeView/TreeView.svelte.d.ts
+++ b/types/TreeView/TreeView.svelte.d.ts
@@ -103,4 +103,10 @@ export default class TreeView extends SvelteComponentTyped<
* Collapses all nodes if no argument is provided
*/
collapseNodes: (filterId?: (node: TreeNode) => boolean) => void;
+
+ /**
+ * Programmatically show a node by `id`.
+ * The matching node will be expanded, selected, and focused
+ */
+ showNode: (id: TreeNodeId) => void;
}