From 6007ce324c010825e6f5e2e4cbd66780fa90452d Mon Sep 17 00:00:00 2001
From: Mukul Aggarwal <58032319+mukul-a@users.noreply.github.com>
Date: Mon, 5 May 2025 14:57:18 -0400
Subject: [PATCH] Updated template refs used with `useTemplateRef`

Updated template refs used with `useTemplateRef` to not match its reference variable name, as a workaround to avoid the vue warning ("Set operation on key "value" failed: target is readonly")

Fix references to nodeElement in TreeViewNode tests

Bump version to 7.0.1
---
 package.json                        |  2 +-
 src/components/TreeView.vue         |  4 +--
 src/components/TreeViewNode.spec.ts | 40 ++++++++++++++---------------
 src/components/TreeViewNode.vue     |  4 +--
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 4137d59..8b3c52f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@grapoza/vue-tree",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Tree components for Vue 3",
   "author": "Gregg Rapoza <grapoza@gmail.com>",
   "license": "MIT",
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index 1a7a154..4393ff3 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="treeElement" class="grtv-wrapper" :class="skinClass">
+  <div ref="treeElementRef" class="grtv-wrapper" :class="skinClass">
     <slot v-if="!areNodesLoaded" name="loading-root">
 
       <span class="grtv-loading">
@@ -167,7 +167,7 @@ const areNodesAsyncLoaded = ref(false);
 const isMounted = ref(false);
 const radioGroupValues = ref({});
 const uniqueId = ref('');
-const treeElement = useTemplateRef("treeElement");
+const treeElement = useTemplateRef("treeElementRef");
 
 const { createMetaModel } = useNodeDataNormalizer();
 
diff --git a/src/components/TreeViewNode.spec.ts b/src/components/TreeViewNode.spec.ts
index fe48afd..3ead29d 100644
--- a/src/components/TreeViewNode.spec.ts
+++ b/src/components/TreeViewNode.spec.ts
@@ -57,7 +57,7 @@ async function triggerKeydown(wrapper: ReturnType<typeof mount<typeof TreeViewNo
   vi.spyOn(e, "stopPropagation");
   vi.spyOn(e, "preventDefault");
 
-  wrapper.vm.$refs.nodeElement.dispatchEvent(e);
+  wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
   await wrapper.vm.$nextTick();
   return e;
 }
@@ -87,17 +87,17 @@ describe('TreeViewNode.vue', () => {
     })
 
     it('should have an ARIA role of treeitem', () => {
-      expect(wrapper.vm.$refs.nodeElement.role).to.equal('treeitem');
+      expect(wrapper.vm.$refs.nodeElementRef.role).to.equal('treeitem');
     });
 
     it('should have a tabindex of 0 if focusable', async () => {
       wrapper.vm.modelValue.focusable = true;
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.$refs.nodeElement.tabIndex).to.equal(0);
+      expect(wrapper.vm.$refs.nodeElementRef.tabIndex).to.equal(0);
     });
 
     it('should have a tabindex of -1 if not focusable', () => {
-      expect(wrapper.vm.$refs.nodeElement.tabIndex).to.equal(-1);
+      expect(wrapper.vm.$refs.nodeElementRef.tabIndex).to.equal(-1);
     });
   });
 
@@ -306,7 +306,7 @@ describe('TreeViewNode.vue', () => {
         });
 
         it('should have an aria-expanded attribute value of false', () => {
-          expect(wrapper.vm.$refs.nodeElement.ariaExpanded).to.equal('false');
+          expect(wrapper.vm.$refs.nodeElementRef.ariaExpanded).to.equal('false');
         });
       });
 
@@ -338,7 +338,7 @@ describe('TreeViewNode.vue', () => {
         });
 
         it('should have an aria-expanded attribute value of true', () => {
-          expect(wrapper.vm.$refs.nodeElement.ariaExpanded).to.equal('true');
+          expect(wrapper.vm.$refs.nodeElementRef.ariaExpanded).to.equal('true');
         });
       });
     });
@@ -390,7 +390,7 @@ describe('TreeViewNode.vue', () => {
     });
 
     it('should not have an aria-expanded attribute', () => {
-      expect(wrapper.vm.$refs.nodeElement.ariaExpanded).to.be.null;
+      expect(wrapper.vm.$refs.nodeElementRef.ariaExpanded).to.be.null;
     });
   });
 
@@ -413,7 +413,7 @@ describe('TreeViewNode.vue', () => {
     });
 
     it('should not have an aria-selected attribute', () => {
-      expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.be.null;
+      expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.be.null;
     });
   });
 
@@ -436,7 +436,7 @@ describe('TreeViewNode.vue', () => {
     });
 
     it('should not have an aria-selected attribute', () => {
-      expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.be.null;
+      expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.be.null;
     });
   });
 
@@ -461,7 +461,7 @@ describe('TreeViewNode.vue', () => {
       });
 
       it('should have an aria-selected attribute of true', () => {
-        expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.equal('true');
+        expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.equal('true');
       });
     });
 
@@ -484,7 +484,7 @@ describe('TreeViewNode.vue', () => {
       });
 
       it('should not have an aria-selected attribute', () => {
-        expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.be.null;
+        expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.be.null;
       });
     });
   });
@@ -510,7 +510,7 @@ describe('TreeViewNode.vue', () => {
       });
 
       it('should have an aria-selected attribute of true', () => {
-        expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.equal('true');
+        expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.equal('true');
       });
     });
 
@@ -535,7 +535,7 @@ describe('TreeViewNode.vue', () => {
       });
 
       it('should not have an aria-selected attribute', () => {
-        expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.be.null;
+        expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.be.null;
       });
     });
   });
@@ -561,7 +561,7 @@ describe('TreeViewNode.vue', () => {
       });
 
       it('should have an aria-selected attribute of true', () => {
-        expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.equal('true');
+        expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.equal('true');
       });
     });
 
@@ -584,7 +584,7 @@ describe('TreeViewNode.vue', () => {
       });
 
       it('should have an aria-selected attribute of false', () => {
-        expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.equal('false');
+        expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.equal('false');
       });
     });
   });
@@ -1581,7 +1581,7 @@ describe('TreeViewNode.vue', () => {
     });
 
     it('should focus the node', () => {
-      expect(wrapper.vm.$refs.nodeElement).to.equal(document.activeElement);
+      expect(wrapper.vm.$refs.nodeElementRef).to.equal(document.activeElement);
     });
 
     it('should emit a treeViewNodeAriaFocusableChange event', () => {
@@ -1638,7 +1638,7 @@ describe('TreeViewNode.vue', () => {
       beforeEach(async () => {
         wrapper = await createWrapper();
         const e =new KeyboardEvent('keydown', { shiftKey: true, keyCode: wrapper.vm.ariaKeyMap.focusPreviousItem[0] });
-        wrapper.vm.$refs.nodeElement.dispatchEvent(e);
+        wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
         await wrapper.vm.$nextTick();
       });
 
@@ -1652,7 +1652,7 @@ describe('TreeViewNode.vue', () => {
       beforeEach(async () => {
         wrapper = await createWrapper();
         const e =new KeyboardEvent('keydown', { altKey: true, keyCode: wrapper.vm.ariaKeyMap.focusPreviousItem[0] });
-        wrapper.vm.$refs.nodeElement.dispatchEvent(e);
+        wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
         await wrapper.vm.$nextTick();
       });
 
@@ -1666,7 +1666,7 @@ describe('TreeViewNode.vue', () => {
       beforeEach(async () => {
         wrapper = await createWrapper();
         const e =new KeyboardEvent('keydown', { ctrlKey: true, keyCode: wrapper.vm.ariaKeyMap.focusPreviousItem[0] });
-        wrapper.vm.$refs.nodeElement.dispatchEvent(e);
+        wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
         await wrapper.vm.$nextTick();
       });
 
@@ -1680,7 +1680,7 @@ describe('TreeViewNode.vue', () => {
       beforeEach(async () => {
         wrapper = await createWrapper();
         const e =new KeyboardEvent('keydown', { metaKey: true, keyCode: wrapper.vm.ariaKeyMap.focusPreviousItem[0] });
-        wrapper.vm.$refs.nodeElement.dispatchEvent(e);
+        wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
         await wrapper.vm.$nextTick();
       });
 
diff --git a/src/components/TreeViewNode.vue b/src/components/TreeViewNode.vue
index e531ef5..9d37d78 100644
--- a/src/components/TreeViewNode.vue
+++ b/src/components/TreeViewNode.vue
@@ -4,7 +4,7 @@
       for a description of the expected data format.
   -->
   <li :id="nodeId"
-      ref="nodeElement"
+      ref="nodeElementRef"
       class="grtvn"
       :class="[
         customClasses.treeViewNode,
@@ -353,7 +353,7 @@ const elementsThatIgnoreClicks = 'input, .grtvn-self-expander, .grtvn-self-expan
 const metaModel = defineModel({ required: true, type: Object as PropType<TreeViewNodeMetaModel> });
 
 const radioGroupValues = ref(props.initialRadioGroupValues);
-const nodeElement = useTemplateRef("nodeElement");
+const nodeElement = useTemplateRef("nodeElementRef");
 
 // COMPUTED