fix: tab navigation not working in Fixed Layout due to event listener timing issue

app/client/src/utils/hooks/useWidgetFocus/useWidgetFocus.tsx

@@ -1,52 +1,70 @@
+import { useCallback, useRef } from "react";
 import { useSelector } from "react-redux";
-import { useCallback, useEffect, useRef } from "react";
 
+import { getIsAutoLayout } from "selectors/canvasSelectors";
 import { handleTab } from "./handleTab";
 import { CANVAS_WIDGET } from "./tabbable";
-import { getIsAutoLayout } from "selectors/canvasSelectors";
 
 function useWidgetFocus(): (instance: HTMLElement | null) => void {
   const ref = useRef<HTMLElement | null>();
   const isAutoLayout = useSelector(getIsAutoLayout);
 
-  // This is a callback that will be called when the ref is set
-  const setRef = useCallback((node: HTMLElement | null) => {
-    if (node === null) return;
+  const attachEventListeners = useCallback(
+    (element: HTMLElement) => {
+      if (isAutoLayout) {
+        return () => {}; // Return empty cleanup function
+      }
 
-    if (ref.current === node) return;
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === "Tab") {
+          handleTab(event);
+        }
+      };
 
-    ref.current = node;
+      // TODO: Fix this the next time the file is edited
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const handleClick = (event: any) => {
+        const target = event.target as HTMLElement;
 
-    return ref;
-  }, []);
+        if (target.matches(CANVAS_WIDGET)) {
+          target.focus();
+        }
+      };
 
-  useEffect(() => {
-    if (isAutoLayout) return;
+      element.addEventListener("keydown", handleKeyDown);
+      element.addEventListener("click", handleClick);
 
-    if (!ref.current) return;
+      // Return cleanup function
+      return () => {
+        element.removeEventListener("keydown", handleKeyDown);
+        element.removeEventListener("click", handleClick);
+      };
+    },
+    [isAutoLayout],
+  );
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Tab") handleTab(event);
-    };
+  // This is a callback that will be called when the ref is set
+  const setRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (node === null) {
+        ref.current = null;
 
-    // TODO: Fix this the next time the file is edited
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleClick = (event: any) => {
-      const target = event.target as HTMLElement;
+        return;
+      }
 
-      if (target.matches(CANVAS_WIDGET)) {
-        target.focus();
+      if (ref.current === node) {
+        return;
       }
-    };
 
-    ref.current.addEventListener("keydown", handleKeyDown);
-    ref.current.addEventListener("click", handleClick);
+      ref.current = node;
+
+      // Attach event listeners immediately when ref is set
+      attachEventListeners(node);
 
-    return () => {
-      ref?.current && ref.current.removeEventListener("keydown", handleKeyDown);
-      ref?.current && ref.current.removeEventListener("click", handleClick);
-    };
-  }, []);
+      return ref;
+    },
+    [attachEventListeners],
+  );
 
   return setRef;
 }