From b1f8a3cc37f5b50825b770d62515cdbf2d72e93e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ian=20L=C3=A9tourneau?= <letourneau.ian@gmail.com>
Date: Fri, 4 Oct 2024 10:57:07 -0400
Subject: [PATCH] fix(qwik): use signal to track DOM ref (#260)

---
 content/2-templating/5-dom-ref/qwik/InputFocused.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/content/2-templating/5-dom-ref/qwik/InputFocused.tsx b/content/2-templating/5-dom-ref/qwik/InputFocused.tsx
index 67cd9202..b3839ad3 100644
--- a/content/2-templating/5-dom-ref/qwik/InputFocused.tsx
+++ b/content/2-templating/5-dom-ref/qwik/InputFocused.tsx
@@ -1,9 +1,12 @@
-import { component$, useVisibleTask$, useRef } from "@builder.io/qwik";
+import { component$, useVisibleTask$, useSignal } from "@builder.io/qwik";
 
 export const InputFocused = component$(() => {
-  const inputElement = useRef(null);
-
-  useVisibleTask$(() => inputElement.current.focus());
+  const inputElement = useSignal<HTMLInputElement>();
+  
+  useVisibleTask$(({ track }) => {
+    const el = track(inputElement);
+    el?.focus();
+  });
 
   return <input type="text" ref={inputElement} />;
 });