Declare template refs with useTemplateRef() (#36)

arches_references/src/arches_references/components/editor/ImageMetadata.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import arches from "arches";
-import { computed, ref, inject } from "vue";
+import { computed, inject, ref, useTemplateRef } from "vue";
 import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
@@ -52,7 +52,7 @@ const item = inject(itemKey) as Ref<ControlledListItem>;
 const { image } = defineProps<{ image: ControlledListItemImage }>();
 const editingRows = ref<NewOrExistingControlledListItemImageMetadata[]>([]);
 const rowIndexToFocus = ref(-1);
-const editorRef: Ref<HTMLDivElement | null> = ref(null);
+const editorDiv = useTemplateRef("editorDiv");
 
 const labeledChoices: LabeledChoice[] = [
     {
@@ -227,8 +227,7 @@ const focusInput = () => {
     // This should be reported/clarified with PrimeVue with a MWE.
     setTimeout(() => {
         if (rowIndexToFocus.value !== -1) {
-            const editorDiv = editorRef.value;
-            const rowEl = editorDiv!.querySelector(inputSelector.value);
+            const rowEl = editorDiv.value!.querySelector(inputSelector.value);
             const inputEl = rowEl!.children[1].children[0];
             // @ts-expect-error focusVisible not yet in typeshed
             (inputEl as HTMLInputElement).focus({ focusVisible: true });
@@ -239,7 +238,7 @@ const focusInput = () => {
 </script>
 
 <template>
-    <div ref="editorRef">
+    <div ref="editorDiv">
         <DataTable
             v-if="image.metadata.length"
             v-model:editing-rows="editingRows"

arches_references/src/arches_references/components/editor/ValueEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import arches from "arches";
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, useTemplateRef } from "vue";
 import { useGettext } from "vue3-gettext";
 
 import Column from "primevue/column";
@@ -39,7 +39,7 @@ const { valueType, valueCategory } = defineProps<{
 }>();
 const editingRows: Ref<Value[]> = ref([]);
 const rowIndexToFocus = ref(-1);
-const editorRef: Ref<HTMLDivElement | null> = ref(null);
+const editorDiv = useTemplateRef("editorDiv");
 
 const item = inject(itemKey) as Ref<ControlledListItem>;
 
@@ -234,8 +234,7 @@ const focusInput = () => {
         // Note editor uses the second column.
         const indexOfInputCol = valueCategory ? 1 : 0;
         if (rowIndexToFocus.value !== -1) {
-            const editorDiv = editorRef.value;
-            const rowEl = editorDiv!.querySelector(inputSelector.value);
+            const rowEl = editorDiv.value!.querySelector(inputSelector.value);
             const inputEl = rowEl!.children[indexOfInputCol].children[0];
             // @ts-expect-error focusVisible not yet in typeshed
             (inputEl as HTMLInputElement).focus({ focusVisible: true });
@@ -247,7 +246,7 @@ const focusInput = () => {
 
 <template>
     <div
-        ref="editorRef"
+        ref="editorDiv"
         class="value-editor-container"
     >
         <h4>{{ headings.heading }}</h4>

arches_references/src/arches_references/components/tree/ActionBanner.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, ref } from "vue";
+import { inject } from "vue";
 import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
@@ -25,8 +25,6 @@ const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
     required: true,
 });
 
-const abandonMoveRef = ref();
-
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 
 const { $gettext } = useGettext();
@@ -55,7 +53,6 @@ const abandonMove = () => {
             )
         }}
         <Button
-            ref="abandonMoveRef"
             type="button"
             class="banner-button"
             :severity="shouldUseContrast() ? CONTRAST : SECONDARY"

arches_references/src/arches_references/components/tree/ListTree.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, ref, watch } from "vue";
+import { computed, inject, ref, useTemplateRef, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useGettext } from "vue3-gettext";
 
@@ -19,7 +19,7 @@ import LetterCircle from "@/arches_references/components/misc/LetterCircle.vue";
 import ListTreeControls from "@/arches_references/components/tree/ListTreeControls.vue";
 import TreeRow from "@/arches_references/components/tree/TreeRow.vue";
 
-import type { ComponentPublicInstance, Ref } from "vue";
+import type { Ref } from "vue";
 import type { RouteLocationNormalizedLoadedGeneric } from "vue-router";
 import type { TreePassThroughMethodOptions } from "primevue/tree";
 import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree";
@@ -47,7 +47,7 @@ const movingItem: Ref<TreeNode | undefined> = ref();
 const isMultiSelecting = ref(false);
 const refetcher = ref(0);
 const filterValue = ref("");
-const treeDOMRef: Ref<ComponentPublicInstance | null> = ref(null);
+const treeComponent = useTemplateRef("treeComponent");
 
 // For next new item's pref label (input textbox)
 const newLabelFormValue = ref("");
@@ -188,8 +188,8 @@ const expandPathsToFilterResults = (newFilterValue: string) => {
 };
 
 const getInputElement = () => {
-    if (treeDOMRef.value !== null) {
-        return treeDOMRef.value.$el.ownerDocument.querySelector(
+    if (treeComponent.value !== null) {
+        return treeComponent.value.$el.ownerDocument.querySelector(
             'input[data-pc-name="pcfilter"]',
         ) as HTMLInputElement;
     }
@@ -263,7 +263,7 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
     />
     <Tree
         v-if="tree"
-        ref="treeDOMRef"
+        ref="treeComponent"
         :key="rerenderTree"
         v-model:selection-keys="selectedKeys"
         v-model:expanded-keys="expandedKeys"

arches_references/src/arches_references/components/tree/TreeRow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, ref, watch } from "vue";
+import { computed, inject, ref, useTemplateRef, watch } from "vue";
 import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
@@ -82,16 +82,16 @@ const { setDisplayedRow }: { setDisplayedRow: RowSetter } =
 const awaitingMove = ref(false);
 // Workaround for autofocusing the new list/label input boxes
 // https://github.com/primefaces/primevue/issues/2397
-const newListInputRef = ref();
-const newLabelInputRef = ref();
-watch(newLabelInputRef, () => {
-    if (newLabelInputRef.value) {
-        newLabelInputRef.value.$el.focus();
+const newListInput = useTemplateRef("newListInput");
+const newLabelInput = useTemplateRef("newLabelInput");
+watch(newLabelInput, () => {
+    if (newLabelInput.value) {
+        newLabelInput.value.$el.focus();
     }
 });
-watch(newListInputRef, () => {
-    if (newListInputRef.value) {
-        newListInputRef.value.$el.focus();
+watch(newListInput, () => {
+    if (newListInput.value) {
+        newListInput.value.$el.focus();
     }
 });
 
@@ -235,13 +235,13 @@ const acceptNewItemShortcutEntry = async () => {
 
 const triggerAcceptNewItemShortcut = () => {
     if (newLabelFormValue.value.trim()) {
-        newLabelInputRef.value.$el.blur();
+        newLabelInput.value!.$el.blur();
     }
 };
 
 const triggerAcceptNewListShortcut = () => {
     if (newListFormValue.value.trim()) {
-        newListInputRef.value.$el.blur();
+        newListInput.value!.$el.blur();
     }
 };
 
@@ -275,7 +275,7 @@ const acceptNewListShortcutEntry = async () => {
     >
         <div v-if="isNewItem(node)">
             <InputText
-                ref="newLabelInputRef"
+                ref="newLabelInput"
                 v-model="newLabelFormValue"
                 autofocus
                 @blur="acceptNewItemShortcutEntry"
@@ -284,7 +284,7 @@ const acceptNewListShortcutEntry = async () => {
         </div>
         <div v-else-if="isNewList(node)">
             <InputText
-                ref="newListInputRef"
+                ref="newListInput"
                 v-model="newListFormValue"
                 autofocus
                 @blur="acceptNewListShortcutEntry"