From 89a0d70959a4acf11c97cc7ce73315f00e782bd8 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 27 Dec 2024 16:25:20 +0100
Subject: [PATCH] chore(ui): use `useTemplateRef` instead of plain `ref` -
 WF-163

---
 src/ui/src/builder/BuilderInstanceTracker.vue | 12 ++++++++++--
 .../builder/settings/BuilderFieldsAlign.vue   | 10 ++++++----
 .../builder/settings/BuilderFieldsColor.vue   |  9 +++++----
 .../settings/BuilderFieldsKeyValue.vue        |  5 +++--
 .../builder/settings/BuilderFieldsPadding.vue | 13 +++++++------
 .../builder/settings/BuilderFieldsShadow.vue  | 17 +++++++++--------
 .../builder/settings/BuilderFieldsWidth.vue   | 13 +++++++------
 .../src/components/core/base/BaseSelect.vue   | 19 ++++++++++++++-----
 .../components/core/content/CoreAvatar.vue    |  4 ++--
 .../components/core/content/CoreChatbot.vue   |  7 ++++---
 .../core/content/CoreDataframeLegacy.vue      |  8 ++++----
 .../src/components/core/content/CoreImage.vue |  4 ++--
 .../core/content/CorePlotlyGraph.vue          |  6 +++---
 .../src/components/core/content/CoreTags.vue  |  4 ++--
 .../src/components/core/content/CoreText.vue  |  4 ++--
 .../core/content/CoreVegaLiteChart.vue        |  6 +++---
 .../components/core/embed/CoreGoogleMaps.vue  |  6 +++---
 .../src/components/core/embed/CoreIFrame.vue  |  4 ++--
 .../components/core/input/CoreRatingInput.vue |  7 +++----
 .../components/core/other/CorePagination.vue  | 11 +++++++++--
 .../src/components/core/other/CoreTimer.vue   | 12 ++++++++++--
 .../core/other/CoreWebcamCapture.vue          |  5 +++--
 src/ui/src/components/core/root/CorePage.vue  |  4 ++--
 src/ui/src/components/core/root/CoreRoot.vue  |  3 ++-
 .../custom/BubbleMessageAdvanced.vue          |  4 ++--
 .../components/workflows/WorkflowsRoot.vue    |  4 ++--
 .../workflows/WorkflowsWorkflow.vue           |  5 +++--
 src/ui/src/renderer/RendererNotifications.vue |  4 ++--
 src/ui/src/wds/WdsTabs.vue                    |  5 ++++-
 29 files changed, 130 insertions(+), 85 deletions(-)

diff --git a/src/ui/src/builder/BuilderInstanceTracker.vue b/src/ui/src/builder/BuilderInstanceTracker.vue
index 1e2c109aa..3838d132f 100644
--- a/src/ui/src/builder/BuilderInstanceTracker.vue
+++ b/src/ui/src/builder/BuilderInstanceTracker.vue
@@ -4,7 +4,15 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, Ref, ref, toRefs } from "vue";
+import {
+	nextTick,
+	onMounted,
+	onUnmounted,
+	Ref,
+	ref,
+	toRefs,
+	useTemplateRef,
+} from "vue";
 
 const REFRESH_INTERVAL_MS = 200;
 
@@ -33,7 +41,7 @@ type RootStyle = {
 
 const rootStyle: Ref<RootStyle> = ref(null);
 const timerId = ref(0);
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const MIN_TOP_PX = 36;
 
 const trackElement = (el: HTMLElement) => {
diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
index 71da71685..271c017b6 100644
--- a/src/ui/src/builder/settings/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -14,6 +14,7 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
+					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
 					@update:model-value="handleInputSelect"
@@ -41,6 +42,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -57,9 +59,9 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const pickerEl: Ref<HTMLInputElement> = ref(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const pickerEl = useTemplateRef("pickerEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
 
 enum SubMode {
 	hleft = "start",
@@ -129,7 +131,7 @@ const verticalSubmodes: SubModes = [
 	},
 ];
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: pickerEl,
 	css: freehandInputEl,
 	default: null,
diff --git a/src/ui/src/builder/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
index 87114caa0..d55d75368 100644
--- a/src/ui/src/builder/settings/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -40,6 +40,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -55,11 +56,11 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const pickerEl: Ref<HTMLInputElement> = ref(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const pickerEl = useTemplateRef("pickerEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: pickerEl,
 	css: freehandInputEl,
 	default: null,
diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index 506a3fe56..9b40ef7ff 100644
--- a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -69,6 +69,7 @@ import {
 	onMounted,
 	ref,
 	toRefs,
+	useTemplateRef,
 	watch,
 } from "vue";
 import injectionKeys from "../../injectionKeys";
@@ -92,8 +93,8 @@ const props = defineProps({
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const assistedKeyEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const assistedKeyEl = useTemplateRef("assistedKeyEl");
 type Mode = "assisted" | "freehand";
 const mode: Ref<Mode> = ref(null);
 const assistedEntries: Ref<Record<string, string | number | null>> = ref({});
diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
index 0312f516c..92ecce950 100644
--- a/src/ui/src/builder/settings/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -14,6 +14,7 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
+					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
 					@update:model-value="handleInputSelect"
@@ -102,7 +103,6 @@
 
 <script setup lang="ts">
 import {
-	ComponentInstance,
 	computed,
 	inject,
 	nextTick,
@@ -111,6 +111,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -128,10 +129,10 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const pickerEl: Ref<HTMLInputElement> = ref(null);
-const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const pickerEl = useTemplateRef("pickerEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
+const fixedEl = useTemplateRef("fixedEl");
 
 enum SubMode {
 	all_sides = "all_sides",
@@ -177,7 +178,7 @@ const subModes: Array<{
 	},
 ];
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: pickerEl,
 	css: freehandInputEl,
 	default: null,
diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
index 03cddfb69..78ffa14a3 100644
--- a/src/ui/src/builder/settings/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -109,6 +109,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -124,15 +125,15 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
-const paramOffsetXEl: Ref<HTMLInputElement> = ref(null);
-const paramOffsetYEl: Ref<HTMLInputElement> = ref(null);
-const paramBlurRadiusEl: Ref<HTMLInputElement> = ref(null);
-const paramSpreadRadiusEl: Ref<HTMLInputElement> = ref(null);
-const paramColorEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
+const paramOffsetXEl = useTemplateRef("paramOffsetXEl");
+const paramOffsetYEl = useTemplateRef("paramOffsetYEl");
+const paramBlurRadiusEl = useTemplateRef("paramBlurRadiusEl");
+const paramSpreadRadiusEl = useTemplateRef("paramSpreadRadiusEl");
+const paramColorEl = useTemplateRef("paramColorEl");
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: paramOffsetXEl,
 	css: freehandInputEl,
 	default: null,
diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
index 12e898fae..5bce8921e 100644
--- a/src/ui/src/builder/settings/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -14,6 +14,7 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
+					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
 					@update:model-value="handleInputSelect"
@@ -41,7 +42,6 @@
 
 <script setup lang="ts">
 import {
-	ComponentInstance,
 	computed,
 	inject,
 	nextTick,
@@ -50,6 +50,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -67,10 +68,10 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const pickerEl: Ref<HTMLInputElement> = ref(null);
-const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const pickerEl = useTemplateRef("pickerEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
+const fixedEl = useTemplateRef("fixedEl");
 
 enum SubMode {
 	fixed = "fixed",
@@ -105,7 +106,7 @@ const subModes: Array<{
 	},
 ];
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: pickerEl,
 	css: freehandInputEl,
 	default: null,
diff --git a/src/ui/src/components/core/base/BaseSelect.vue b/src/ui/src/components/core/base/BaseSelect.vue
index 3322f7438..1165726fd 100644
--- a/src/ui/src/components/core/base/BaseSelect.vue
+++ b/src/ui/src/components/core/base/BaseSelect.vue
@@ -93,7 +93,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, PropType, Ref, ref, toRefs, watch } from "vue";
+import {
+	computed,
+	nextTick,
+	PropType,
+	Ref,
+	ref,
+	toRefs,
+	useTemplateRef,
+	watch,
+} from "vue";
 
 const emit = defineEmits(["change"]);
 
@@ -121,10 +130,10 @@ const activeValue = computed<string[]>(() =>
 );
 
 const LIST_MAX_HEIGHT_PX = 200;
-const rootEl: Ref<HTMLElement | null> = ref(null);
-const inputEl: Ref<HTMLElement | null> = ref(null);
-const selectedOptionsEl: Ref<HTMLElement | null> = ref(null);
-const listEl: Ref<HTMLElement | null> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const inputEl = useTemplateRef("inputEl");
+const selectedOptionsEl = useTemplateRef("selectedOptionsEl");
+const listEl = useTemplateRef("listEl");
 const activeText: Ref<string> = ref("");
 const highlightedOffset: Ref<number | null> = ref(null);
 const selectedOptions: Ref<string[]> = ref([]);
diff --git a/src/ui/src/components/core/content/CoreAvatar.vue b/src/ui/src/components/core/content/CoreAvatar.vue
index 0f2d1296a..5b8e8dd60 100644
--- a/src/ui/src/components/core/content/CoreAvatar.vue
+++ b/src/ui/src/components/core/content/CoreAvatar.vue
@@ -97,10 +97,10 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { CSSProperties, Ref, computed, inject, ref } from "vue";
+import { CSSProperties, computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
index 521bfa16c..c23e16c2f 100644
--- a/src/ui/src/components/core/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -303,15 +303,16 @@ import {
 	ref,
 	computed,
 	ComputedRef,
+	useTemplateRef,
 } from "vue";
 import injectionKeys from "@/injectionKeys";
 import CoreChatbotSentMessageIcon from "./CoreChatBot/CoreChatbotSentMessageIcon.vue";
 import CoreChatbotMessage from "./CoreChatBot/CoreChatbotMessage.vue";
 import type { Message } from "./CoreChatBot/CoreChatbotMessage.vue";
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const messageAreaEl: Ref<HTMLElement> = ref(null);
-const messagesEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const messageAreaEl = useTemplateRef("messageAreaEl");
+const messagesEl = useTemplateRef("messagesEl");
 const messageIndexLoading: Ref<number | undefined> = ref(undefined);
 const fields = inject(injectionKeys.evaluatedFields);
 const files: Ref<File[]> = shallowRef([]);
diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
index 26f1d34e3..f40ba0491 100644
--- a/src/ui/src/components/core/content/CoreDataframeLegacy.vue
+++ b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
@@ -109,7 +109,7 @@
 </template>
 
 <script lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { Ref, computed, inject, ref, useTemplateRef } from "vue";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	cssClasses,
@@ -245,9 +245,9 @@ type OrderSetting = {
 };
 
 const fields = inject(injectionKeys.evaluatedFields);
-const rootEl: Ref<HTMLElement> = ref();
-const toolsEl: Ref<HTMLElement> = ref();
-const gridContainerEl: Ref<HTMLElement> = ref();
+const rootEl = useTemplateRef("rootEl");
+const toolsEl = useTemplateRef("toolsEl");
+const gridContainerEl = useTemplateRef("gridContainerEl");
 let baseTable: aq.internal.ColumnTable = null;
 const table: Ref<aq.internal.ColumnTable> = ref(null);
 const tableIndex = ref([]);
diff --git a/src/ui/src/components/core/content/CoreImage.vue b/src/ui/src/components/core/content/CoreImage.vue
index c78d84739..0b0edbe6b 100644
--- a/src/ui/src/components/core/content/CoreImage.vue
+++ b/src/ui/src/components/core/content/CoreImage.vue
@@ -89,10 +89,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const wf = inject(injectionKeys.core);
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
diff --git a/src/ui/src/components/core/content/CorePlotlyGraph.vue b/src/ui/src/components/core/content/CorePlotlyGraph.vue
index 31557f73e..d3f228e73 100644
--- a/src/ui/src/components/core/content/CorePlotlyGraph.vue
+++ b/src/ui/src/components/core/content/CorePlotlyGraph.vue
@@ -56,11 +56,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, Ref, ref, watch } from "vue";
+import { computed, inject, onMounted, useTemplateRef, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const chartTargetEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const chartTargetEl = useTemplateRef("chartTargetEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const spec = computed(() => fields.spec.value);
 
diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
index 938b57080..0f9fa78b4 100644
--- a/src/ui/src/components/core/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -85,7 +85,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import chroma from "chroma-js";
 
@@ -101,7 +101,7 @@ const COLOR_STEPS = [
 	{ h: 69, s: 0, l: 25 },
 	{ h: 70, s: 0, l: 29 },
 ];
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
index 8894993d0..cdd686167 100644
--- a/src/ui/src/components/core/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -84,12 +84,12 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
 
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);
diff --git a/src/ui/src/components/core/content/CoreVegaLiteChart.vue b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
index 1881c631b..8e79d312f 100644
--- a/src/ui/src/components/core/content/CoreVegaLiteChart.vue
+++ b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
@@ -57,11 +57,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, onMounted, Ref, ref, watch } from "vue";
+import { inject, onMounted, useTemplateRef, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const chartTargetEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const chartTargetEl = useTemplateRef("chartTargetEl");
 const fields = inject(injectionKeys.evaluatedFields);
 
 const renderChart = async () => {
diff --git a/src/ui/src/components/core/embed/CoreGoogleMaps.vue b/src/ui/src/components/core/embed/CoreGoogleMaps.vue
index a0aaf0798..afa383266 100644
--- a/src/ui/src/components/core/embed/CoreGoogleMaps.vue
+++ b/src/ui/src/components/core/embed/CoreGoogleMaps.vue
@@ -87,11 +87,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { Ref, inject, ref, onMounted, watch, computed } from "vue";
+import { inject, onMounted, watch, computed, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const mapEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const mapEl = useTemplateRef("mapEl");
 const fields = inject(injectionKeys.evaluatedFields);
 let map: google.maps.Map | null = null;
 let markers = [];
diff --git a/src/ui/src/components/core/embed/CoreIFrame.vue b/src/ui/src/components/core/embed/CoreIFrame.vue
index 7c887ecee..3d5a6d9ca 100644
--- a/src/ui/src/components/core/embed/CoreIFrame.vue
+++ b/src/ui/src/components/core/embed/CoreIFrame.vue
@@ -52,10 +52,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { Ref, inject, ref } from "vue";
+import { inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const fields = inject(injectionKeys.evaluatedFields);
 
 function handleLoad() {
diff --git a/src/ui/src/components/core/input/CoreRatingInput.vue b/src/ui/src/components/core/input/CoreRatingInput.vue
index 47d5f58d8..6a408b051 100644
--- a/src/ui/src/components/core/input/CoreRatingInput.vue
+++ b/src/ui/src/components/core/input/CoreRatingInput.vue
@@ -57,7 +57,6 @@ import {
 	primaryTextColor,
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
-import { ComponentPublicInstance } from "vue";
 
 const description =
 	"A user input component that allows users to provide a rating.";
@@ -123,13 +122,13 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { Ref, computed, inject, ref, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
-const rootInstance = ref<ComponentPublicInstance | null>(null);
-const unitsEl: Ref<HTMLElement> = ref(null);
+const rootInstance = useTemplateRef("rootInstance");
+const unitsEl = useTemplateRef("unitsEl");
 const wf = inject(injectionKeys.core);
 const instancePath = inject(injectionKeys.instancePath);
 const provisionalValue: Ref<number> = ref(null);
diff --git a/src/ui/src/components/core/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
index f91817c97..c6f751413 100644
--- a/src/ui/src/components/core/other/CorePagination.vue
+++ b/src/ui/src/components/core/other/CorePagination.vue
@@ -174,13 +174,20 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, ref, computed, watch, onUnmounted, onMounted, Ref } from "vue";
+import {
+	inject,
+	computed,
+	watch,
+	onUnmounted,
+	onMounted,
+	useTemplateRef,
+} from "vue";
 import injectionKeys from "@/injectionKeys";
 import { useFormValueBroker } from "@/renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const wf = inject(injectionKeys.core);
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const instancePath = inject(injectionKeys.instancePath);
 
 const { handleInput: handlePageInput } = useFormValueBroker(
diff --git a/src/ui/src/components/core/other/CoreTimer.vue b/src/ui/src/components/core/other/CoreTimer.vue
index 316f24bd3..33706d00c 100644
--- a/src/ui/src/components/core/other/CoreTimer.vue
+++ b/src/ui/src/components/core/other/CoreTimer.vue
@@ -56,14 +56,22 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, Ref, ref, watch } from "vue";
+import {
+	computed,
+	inject,
+	nextTick,
+	onMounted,
+	ref,
+	useTemplateRef,
+	watch,
+} from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const MIN_ANIMATION_RESET_MS = 500;
 const MIN_ANIMATION_DURATION_MS = 1000;
 const fields = inject(injectionKeys.evaluatedFields);
 const wf = inject(injectionKeys.core);
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 
 const intervalMs = computed(() => fields.intervalMs.value);
 const isActive = computed(() => fields.isActive.value == "yes");
diff --git a/src/ui/src/components/core/other/CoreWebcamCapture.vue b/src/ui/src/components/core/other/CoreWebcamCapture.vue
index cd6684515..b86bb9875 100644
--- a/src/ui/src/components/core/other/CoreWebcamCapture.vue
+++ b/src/ui/src/components/core/other/CoreWebcamCapture.vue
@@ -94,14 +94,15 @@ import {
 	onMounted,
 	Ref,
 	ref,
+	useTemplateRef,
 	watch,
 } from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const isActive = ref(false);
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const canvasEl = document.createElement("canvas");
-const videoEl: Ref<HTMLVideoElement> = ref(null);
+const videoEl = useTemplateRef("videoEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const videoDevices: Ref<MediaDeviceInfo[]> = ref(null);
 const preferredDeviceId: Ref<MediaDeviceInfo["deviceId"]> = ref(null);
diff --git a/src/ui/src/components/core/root/CorePage.vue b/src/ui/src/components/core/root/CorePage.vue
index e094c2c4a..8669ac39c 100644
--- a/src/ui/src/components/core/root/CorePage.vue
+++ b/src/ui/src/components/core/root/CorePage.vue
@@ -119,10 +119,10 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { Ref, inject, ref } from "vue";
+import { inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const fields = inject(injectionKeys.evaluatedFields);
 
 function handleKeydown(ev: KeyboardEvent) {
diff --git a/src/ui/src/components/core/root/CoreRoot.vue b/src/ui/src/components/core/root/CoreRoot.vue
index 3b45f64cb..93cd82c27 100644
--- a/src/ui/src/components/core/root/CoreRoot.vue
+++ b/src/ui/src/components/core/root/CoreRoot.vue
@@ -94,6 +94,7 @@ import {
 	watch,
 	nextTick,
 	onBeforeMount,
+	useTemplateRef,
 } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { changePageInHash, serializeParsedHash } from "@/core/navigation";
@@ -101,7 +102,7 @@ import { changePageInHash, serializeParsedHash } from "@/core/navigation";
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const getChildrenVNodes = inject(injectionKeys.getChildrenVNodes);
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const { isComponentVisible } = useEvaluator(wf);
 
 const displayedPageId = computed(() => {
diff --git a/src/ui/src/components/custom/BubbleMessageAdvanced.vue b/src/ui/src/components/custom/BubbleMessageAdvanced.vue
index 537a6c6d2..f3d0b6610 100644
--- a/src/ui/src/components/custom/BubbleMessageAdvanced.vue
+++ b/src/ui/src/components/custom/BubbleMessageAdvanced.vue
@@ -116,7 +116,7 @@ import {
 	WriterComponentDefinition,
 } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
-import { inject, computed, ref, Ref } from "vue";
+import { inject, computed, useTemplateRef } from "vue";
 
 /* Standard style fields can be imported from "sharedStyleFields" 
 to avoid repetition. */
@@ -128,7 +128,7 @@ import {
 	containerBackgroundColor,
 } from "@/renderer/sharedStyleFields";
 
-const rootEl: Ref<HTMLElement> = ref(null); // Root element is used to fire events
+const rootEl = useTemplateRef("rootEl"); // Root element is used to fire events
 
 /*
 The values for the fields defined earlier in the custom option
diff --git a/src/ui/src/components/workflows/WorkflowsRoot.vue b/src/ui/src/components/workflows/WorkflowsRoot.vue
index d294acba6..d4d3b93be 100644
--- a/src/ui/src/components/workflows/WorkflowsRoot.vue
+++ b/src/ui/src/components/workflows/WorkflowsRoot.vue
@@ -25,12 +25,12 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { computed, inject, ref, Ref } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const wf = inject(injectionKeys.core);
 const getChildrenVNodes = inject(injectionKeys.getChildrenVNodes);
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 
 const displayedWorkflowId = computed(() => {
 	const activePageId = wf.activePageId.value;
diff --git a/src/ui/src/components/workflows/WorkflowsWorkflow.vue b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
index 8e610f219..9ed11ff80 100644
--- a/src/ui/src/components/workflows/WorkflowsWorkflow.vue
+++ b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
@@ -137,6 +137,7 @@ import {
 	onMounted,
 	onUnmounted,
 	ref,
+	useTemplateRef,
 } from "vue";
 import { useComponentActions } from "@/builder/useComponentActions";
 import { useDragDropComponent } from "@/builder/useDragDropComponent";
@@ -145,8 +146,8 @@ import injectionKeys from "@/injectionKeys";
 const renderProxiedComponent = inject(injectionKeys.renderProxiedComponent);
 const workflowComponentId = inject(injectionKeys.componentId);
 
-const rootEl: Ref<HTMLElement | null> = ref(null);
-const nodeContainerEl: Ref<HTMLElement | null> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const nodeContainerEl = useTemplateRef("nodeContainerEl");
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const arrows: Ref<WorkflowArrowData[]> = ref([]);
diff --git a/src/ui/src/renderer/RendererNotifications.vue b/src/ui/src/renderer/RendererNotifications.vue
index 82fe2d1a1..f8fa7676d 100644
--- a/src/ui/src/renderer/RendererNotifications.vue
+++ b/src/ui/src/renderer/RendererNotifications.vue
@@ -39,14 +39,14 @@
 </template>
 
 <script setup lang="ts">
-import { inject, onMounted, reactive, Ref, ref } from "vue";
+import { inject, onMounted, reactive, ref, useTemplateRef } from "vue";
 import injectionKeys from "../injectionKeys";
 import WdsButton from "../wds/WdsButton.vue";
 
 const MAX_ITEMS_IN_LIST = 100;
 const wf = inject(injectionKeys.core);
 const isActive = ref(false);
-const balloon: Ref<HTMLElement> = ref(null);
+const balloon = useTemplateRef("balloon");
 
 const notifications: {
 	type: string;
diff --git a/src/ui/src/wds/WdsTabs.vue b/src/ui/src/wds/WdsTabs.vue
index 8d4d3894e..366a6851a 100644
--- a/src/ui/src/wds/WdsTabs.vue
+++ b/src/ui/src/wds/WdsTabs.vue
@@ -24,7 +24,10 @@ import { PropType } from "vue";
 import WdsTab from "./WdsTab.vue";
 
 defineProps({
-	tabs: { type: Array as PropType<WdsTabOptions[]>, required: true },
+	tabs: {
+		type: Array as PropType<WdsTabOptions[] | Readonly<WdsTabOptions[]>>,
+		required: true,
+	},
 });
 
 const selected = defineModel({ type: String });