From ed395e42b72c7bb243d72600eeaf39638e8f1aa8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 14 Jul 2021 08:47:08 -0700
Subject: [PATCH] fix(tree-view): TreeView should be tab focusable if no active
 id is provided #747 (#748)

Fixes #747
---
 src/TreeView/TreeView.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index 10e71aee..b58f1d13 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -1,6 +1,4 @@
 <script>
-  // TODO: add function to programmatically expand/collapse parent nodes
-
   /**
    * @typedef {string | number} TreeNodeId
    * @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("carbon-icons-svelte").CarbonIcon; disabled?: boolean; expanded?: boolean; }} TreeNode
@@ -40,7 +38,7 @@
   /** Set to `true` to visually hide the label text */
   export let hideLabel = false;
 
-  import { createEventDispatcher, setContext } from "svelte";
+  import { createEventDispatcher, setContext, onMount } from "svelte";
   import { writable } from "svelte/store";
   import TreeViewNodeList from "./TreeViewNodeList.svelte";
 
@@ -82,6 +80,18 @@
     }
   }
 
+  onMount(() => {
+    if ($activeNodeId === "") {
+      const firstFocusableNode = ref.querySelector(
+        "li.bx--tree-node:not(.bx--tree-node--disabled)"
+      );
+
+      if (firstFocusableNode != null) {
+        firstFocusableNode.tabIndex = "0";
+      }
+    }
+  });
+
   $: activeNodeId.set(activeId);
   $: selectedNodeIds.set(selectedIds);
   $: if (ref) {