Fix focus stealing on mount

Author: grapoza

src/components/TreeView.vue

@@ -11,6 +11,7 @@
                     :initial-model="nodeModel"
                     :selection-mode="selectionMode"
                     :tree-id="uniqueId"
+                    :is-mounted="isMounted"
                     :initial-radio-group-values="radioGroupValues"
                     @treeViewNodeClick="(t, e)=>$emit('treeViewNodeClick', t, e)"
                     @treeViewNodeDblclick="(t, e)=>$emit('treeViewNodeDblclick', t, e)"
@@ -82,7 +83,8 @@
       return {
         uniqueId: null,
         model: this.initialModel,
-        radioGroupValues: {}
+        radioGroupValues: {},
+        isMounted: false
       };
     },
     computed: {
@@ -95,6 +97,13 @@
     mounted() {
       this.$_treeView_enforceSingleSelectionMode();
       this.$set(this, 'uniqueId', this.$el.id ? this.$el.id : null);
+
+      // Set this in a $nextTick so the focusable watcher
+      // in TreeViewNodeAria fires before isMounted is set.
+      // Otherwise, it steals focus when the tree is mounted.
+      this.$nextTick(() => {
+        this.isMounted = true;
+      });
     },
     methods: {
       getCheckedCheckboxes() {

src/components/TreeViewNode.vue

@@ -151,6 +151,7 @@
                       :tree-id="treeId"
                       :initial-radio-group-values="radioGroupValues"
                       :aria-key-map="ariaKeyMap"
+                      :is-mounted="isMounted"
                       @treeViewNodeClick="(t, e)=>$emit('treeViewNodeClick', t, e)"
                       @treeViewNodeDblclick="(t, e)=>$emit('treeViewNodeDblclick', t, e)"
                       @treeViewNodeCheckboxChange="(t, e)=>$emit('treeViewNodeCheckboxChange', t, e)"
@@ -196,6 +197,10 @@
         type: Object,
         required: true
       },
+      isMounted: {
+        type: Boolean,
+        required: true
+      },
       modelDefaults: {
         type: Object,
         required: true
@@ -470,7 +475,7 @@
         this.$emit('treeViewNodeExpandedChange', this.model, event);
       },
       $_treeViewNode_toggleSelected(event) {
-        // Note that selection change is already handled by the "model.focusable" watcher
+        // Note that selection change is already handled by the "model.treeNodeSpec.focusable" watcher
         // method in TreeViewNodeAria if selectionMode is selectionFollowsFocus.
         if (this.model.treeNodeSpec.selectable && ['single', 'multiple'].includes(this.selectionMode)) {
           this.model.treeNodeSpec.state.selected = !this.model.treeNodeSpec.state.selected;

src/mixins/TreeViewAria.js

@@ -85,7 +85,7 @@ export default {
         this.$_treeView_enforceSingleSelectionMode();
       }
       else if (this.selectionMode === 'selectionFollowsFocus') {
-        // Make sure the actual focused item is selected if the mode changes, and deselect all others
+        // Make sure the actual focusable item is selected if the mode changes, and deselect all others
         this.$_treeView_depthFirstTraverse((node) => {
           let idPropName = node.treeNodeSpec.idProperty;
           let focusableIdPropName = this.focusableNodeModel.treeNodeSpec.idProperty;
@@ -101,11 +101,13 @@ export default {
       }
     },
     $_treeViewAria_handleFocusableChange(newNodeModel) {
-      if (this.focusableNodeModel) {
-        this.focusableNodeModel.treeNodeSpec.focusable = false;
-      }
+      if (this.focusableNodeModel !== newNodeModel) {
+        if (this.focusableNodeModel) {
+          this.focusableNodeModel.treeNodeSpec.focusable = false;
+        }
 
-      this.$set(this, 'focusableNodeModel', newNodeModel);
+        this.$set(this, 'focusableNodeModel', newNodeModel);
+      }
     },
     $_treeViewAria_focusFirstNode() {
       this.model[0].treeNodeSpec.focusable = true;

src/mixins/TreeViewNodeAria.js

@@ -15,9 +15,12 @@ export default {
   },
   watch: {
     'model.treeNodeSpec.focusable': function(newValue) {
-      // If focusable is set to true, also focus the treeitem element.
       if (newValue === true) {
-        this.$el.focus();
+        // If focusable is set to true and the tree is mounted in the DOM,
+        // also focus the node's element.
+        if (this.isMounted) {
+          this.$el.focus();
+        }
         this.$emit('treeViewNodeAriaFocusable', this.model);
       }
 

tests/unit/TreeViewNode.customizations.spec.js

@@ -23,7 +23,8 @@ const getDefaultPropsData = function () {
     modelDefaults: {},
     depth: 0,
     treeId: 'tree-id',
-    initialRadioGroupValues: {}
+    initialRadioGroupValues: {},
+    isMounted: false
   }
 };
 
@@ -80,7 +81,8 @@ describe('TreeViewNode.vue (customizations)', () => {
         depth: 0,
         treeId: 'tree',
         initialRadioGroupValues: {},
-        selectionMode: 'single'
+        selectionMode: 'single',
+        isMounted: false
       });
     });
 
@@ -196,7 +198,8 @@ describe('TreeViewNode.vue (customizations)', () => {
             modelDefaults: { customizations: { classes: customClasses } },
             depth: 0,
             treeId: 'tree',
-            initialRadioGroupValues: {}
+            initialRadioGroupValues: {},
+            isMounted: false
           },
           {
             text: '<span :id="props.model.id" class="text-slot-content"><span class="slot-custom-classes">{{ JSON.stringify(props.customClasses) }}</span></span>',
@@ -231,7 +234,8 @@ describe('TreeViewNode.vue (customizations)', () => {
             modelDefaults: { customizations: { classes: customClasses } },
             depth: 0,
             treeId: 'tree',
-            initialRadioGroupValues: {}
+            initialRadioGroupValues: {},
+            isMounted: false
           },
           {
             checkbox: `<span :id="props.model.id" class="text-slot-content">
@@ -278,7 +282,8 @@ describe('TreeViewNode.vue (customizations)', () => {
             modelDefaults: { customizations: { classes: customClasses } },
             depth: 0,
             treeId: 'tree',
-            initialRadioGroupValues: {}
+            initialRadioGroupValues: {},
+            isMounted: false
           },
           {
             radio: `<span :id="props.model.id" class="text-slot-content">

tests/unit/TreeViewNode.interactions.spec.js

@@ -24,6 +24,7 @@ const getDefaultPropsData = function () {
     depth: 0,
     treeId: 'tree-id',
     initialRadioGroupValues: {},
+    isMounted: false,
     selectionMode: 'multiple'
   }
 };
@@ -116,7 +117,8 @@ describe('TreeViewNode.vue (interactions)', () => {
         modelDefaults: {},
         depth: 0,
         treeId: 'tree',
-        initialRadioGroupValues: {}
+        initialRadioGroupValues: {},
+        isMounted: false
       });
 
       expander = wrapper.find('#' + wrapper.vm.expanderId);
@@ -184,7 +186,8 @@ describe('TreeViewNode.vue (interactions)', () => {
         modelDefaults: {},
         depth: 0,
         treeId: 'tree',
-        initialRadioGroupValues: {}
+        initialRadioGroupValues: {},
+        isMounted: false
       });
 
       radioButton = wrapper.find('#' + wrapper.vm.inputId);
@@ -224,7 +227,8 @@ describe('TreeViewNode.vue (interactions)', () => {
         modelDefaults: {},
         depth: 0,
         treeId: 'tree',
-        initialRadioGroupValues: {}
+        initialRadioGroupValues: {},
+        isMounted: false
       });
 
       deleteButton = wrapper.find('#' + wrapper.vm.$children[0].nodeId + '-delete');
@@ -258,7 +262,8 @@ describe('TreeViewNode.vue (interactions)', () => {
           modelDefaults: {},
           depth: 0,
           treeId: 'tree',
-          initialRadioGroupValues: {}
+          initialRadioGroupValues: {},
+          isMounted: false
         });
 
         addChildButton = wrapper.find('#' + wrapper.vm.nodeId + '-add-child');
@@ -294,7 +299,8 @@ describe('TreeViewNode.vue (interactions)', () => {
           modelDefaults: {},
           depth: 0,
           treeId: 'tree',
-          initialRadioGroupValues: {}
+          initialRadioGroupValues: {},
+          isMounted: false
         });
 
         addChildButton = wrapper.find('#' + wrapper.vm.nodeId + '-add-child');