Fix focus resolution on model change

src/components/TreeView.vue

@@ -229,6 +229,12 @@ useTreeViewFilter(metaModel);
 
 // Watch the model to make sure the metamodel is kept in sync
 watchEffect(() => {
+  // if there were no nodes or the focusable node was a child, track it to
+  // make sure a focusable node is present after the model is updated.
+  const initialFocusableIndex = metaModel.value.length === 0
+    ? 0
+    : metaModel.value.findIndex((node) => node.focusable);
+
   model.value.forEach((node: { [key: string]: any }, index) => {
     const metaIndex = metaModel.value.findIndex((m) => m.data[m.idProperty] === node[m.idProperty]);
 
@@ -249,6 +255,19 @@ watchEffect(() => {
   if (metaModel.value.length > model.value.length) {
     metaModel.value.splice(model.value.length);
   }
+
+  // Check whether the focusable node was a removed child or if the model was empty and if so, set a new focusable node.
+  if (initialFocusableIndex > -1) {
+    if(metaModel.value.length > 0) {
+      const currentFocusableIndex = metaModel.value.findIndex((node) => node.focusable);
+      if (currentFocusableIndex === -1) {
+        focus(metaModel.value[Math.min(initialFocusableIndex, metaModel.value.length - 1)]);
+      }
+    }
+    else {
+      focusableNodeMetaModel.value = null;
+    }
+  }
 });
 
 // COMPUTED

src/components/TreeViewNode.vue

@@ -452,6 +452,10 @@ watchEffect(() => {
   const metaChildren = children.value;
   const dataChildren = getChildren(metaModel);
 
+  // if the focusable node was a child, track it to
+  // make sure a focusable node is present after the model is updated.
+  const initialFocusableIndex =  metaChildren.findIndex((node) => node.focusable);
+
   dataChildren.forEach((node, index) => {
     const metaIndex = metaChildren.findIndex((m) => m.data[idPropName.value] === node[idPropName.value]);
 
@@ -472,6 +476,19 @@ watchEffect(() => {
   if (metaChildren.length > dataChildren.length) {
     metaChildren.splice(dataChildren.length);
   }
+
+  // Check whether the focusable node was a removed child and if so, set a new focusable node.
+  if (initialFocusableIndex > -1) {
+    if(metaChildren.length > 0) {
+      const currentFocusableIndex = metaChildren.findIndex((node) => node.focusable);
+      if (currentFocusableIndex === -1) {
+        focus(metaChildren[Math.min(initialFocusableIndex, metaChildren.length - 1)]);
+      }
+    }
+    else {
+      focus(metaModel.value);
+    }
+  }
 });
 
 // METHODS

src/composables/nodeDataNormalizer.ts

@@ -23,6 +23,7 @@ export function useNodeDataNormalizer(
   const createMetaModel = (nodeData: object): TreeViewNodeMetaModelDefaults => ({
     data: nodeData,
     childMetaModels: [] as TreeViewNodeMetaModelDefaults[],
+    _: {},
   });
 
   /**

src/stories/definitions/TreeView.ExternalDataChanges.js

@@ -20,6 +20,7 @@ const Template = (args) => ({
   <button type="button" @click="addNode">Add a node to the end of the model</button>
   <button type="button" @click="addChildNode" :disabled="modelValue.length === 0">Add a child node to the end of the first node's model</button>
   <button type="button" @click="removeNode" :disabled="modelValue.length === 0">Remove the first node from the model</button>
+  <button type="button" @click="removeFocusableNode">Remove the focused node from the model</button>
   <button type="button" @click="swapNodes" :disabled="modelValue.length < 2">Swap the first two nodes in the model</button>
   <button type="button" @click="toggleCheckNode">Toggle the first checkbox in the meta model</button>
 </section>
@@ -41,6 +42,27 @@ const Template = (args) => ({
         children: [],
       });
     },
+    removeFocusableNode() {
+      const focusedNode = this.$refs.treeViewRef.getMatching((n) => n.focusable)[0];
+
+      if (!focusedNode) {
+        return;
+      }
+
+      // Remove at the root
+      if (this.modelValue.some((n) => focusedNode.data.id === n.id)) {
+        this.modelValue.splice(this.modelValue.findIndex((n) => focusedNode.data.id === n.id), 1);
+      }
+      else {
+        // Remove from children
+        this.traverseTree((n) => {
+          if (n.children.some(n => focusedNode.data.id === n.id)) {
+            n.children.splice(n.children.findIndex(n => focusedNode.data.id === n.id), 1);
+            return false;
+          }
+        });
+      }
+    },
     removeNode() {
       this.modelValue.shift();
     },
@@ -53,6 +75,17 @@ const Template = (args) => ({
         checkNode.state.input.value = !checkNode.state.input.value;
       }
     },
+    traverseTree(nodeActionCallback) {
+      let nodeQueue = this.modelValue.slice();
+      let continueCallbacks = true;
+
+      while (nodeQueue.length > 0 && continueCallbacks !== false) {
+        const current = nodeQueue.shift();
+        const children = current.children ?? [];
+        nodeQueue = children.concat(nodeQueue);
+        continueCallbacks = nodeActionCallback(current) ?? true;
+      }
+    }
   },
 });