fixed set-focus in tag editor

src/components/forms/FlatForm.tsx

@@ -23,6 +23,7 @@ const FlatForm = (props: FlatFormInterface) => {
 
     const [images, setImages] = useState<Image[]>([]);
     const [internalFacilities, updateInternalFacilities] = useState<Facility[]>(props.initialState.facilities);
+    const [tagEditorFocused, setTagEditorFocused] = useState<boolean>(true)
 
     useEffect(() => {
         if (props.initialState.facilities.length > 0)
@@ -131,7 +132,9 @@ const FlatForm = (props: FlatFormInterface) => {
                            tagEditorInterface={{
                                addTag: addFacility,
                                deleteTag: deleteFacility,
-                               initialTags: internalFacilities
+                               initialTags: internalFacilities,
+                               focused: tagEditorFocused,
+                               setFocused: setTagEditorFocused
                            }}
                 />
 

src/components/tags/TagEditor.tsx

@@ -1,17 +1,29 @@
 import {Tag} from "../../common/types/Tag";
 import TagBrick from "./TagBrick";
 import "./TagEditor.scss"
+import {useEffect} from "react";
 
 export interface TagEditorInterface<T extends Tag> {
     addTag: (name: string) => Promise<any>,
     deleteTag: (tag: T) => void,
     initialTags: T[]
+
+    focused: boolean,
+    setFocused: (flag: boolean) => void
 }
 
 const TagEditor = <T extends Tag,> (props: TagEditorInterface<T>) => {
+    useEffect(() => {
+       if (!props.focused){
+           document.getElementById('tag-input')?.focus();
+       }
+    });
+
     const addTag = (name: string) => {
         props.addTag(name)
             .catch((e: any) => console.error(e))
+
+        props.setFocused(true);
     }
 
     const inputChange = (event: any) => {
@@ -27,9 +39,10 @@ const TagEditor = <T extends Tag,> (props: TagEditorInterface<T>) => {
             event.target.value = "";
 
             // set focus on the input again, once the component re-renders
-            setTimeout(() => {
-                document.getElementById('tag-input')?.focus();
-            }, 100)
+            props.setFocused(false);
+
+            // in case the component does not re-render, set the focus here too
+            document.getElementById('tag-input')?.focus();
         }
     }