Focus hook updated to work when a component is selected

Author: jonathanalvares9009

packages/atri-app-core/src/canvasMachine.ts

@@ -401,6 +401,7 @@ export function createCanvasMachine(id: string) {
                         callSubscribers("focusEnd", context, event);
                         console.log("Exited Selected focused State", id);
                       },
+
                       on: {
                         [BLUR]: {
                           target: unfocused,

packages/atri-app-core/src/editor-components/hooks/useFocusComponent.ts

@@ -1,13 +1,29 @@
 import { DecoratorData } from "../../types";
 import { componentStoreApi } from "../../api/componentStoreApi";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { subscribeCanvasMachine } from "../../api";
 
 export function useFocusComponent(props: DecoratorData) {
+  const [id, setId] = useState("");
+
+  useEffect(() => {
+    console.log("State useFocusComponent");
+    const setFocus = subscribeCanvasMachine("focus", (context) => {
+      setId(context.selected || "");
+    });
+    return () => {
+      setFocus();
+    };
+  }, [id]);
+
   useEffect(() => {
-    const ref = componentStoreApi.getComponentRef(props.id);
-    if (ref.current) {
-      ref.current.tabIndex = 0;
-      ref.current.focus();
+    if (props.id === id) {
+      const ref = componentStoreApi.getComponentRef(props.id);
+      if (ref.current) {
+        ref.current.tabIndex = 0;
+        ref.current.focus();
+        console.log("Running ENter");
+      }
     }
-  }, [props.id]);
+  }, [props.id, id]);
 }