ENH Improve component focusing

silverstripe · Mar 21, 2024 · 05eb35c · 05eb35c
1 parent 38d2aa4
commit 05eb35c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/components/LinkField/LinkField.js b/client/src/components/LinkField/LinkField.js
@@ -69,6 +69,7 @@ const LinkField = ({
   const [focusOnID, setFocusOnID] = useState(0);
   const [focusOnNewLinkWhenClosed, setFocusOnNewLinkWhenClosed] = useState(false);
   const [focusOnNewLink, setFocusOnNewLink] = useState(false);
+  const [focusOnIDWhenAvailable, setFocusOnIDWhenAvailable] = useState(0);
   const [loading, setLoading] = useState(false);
   const [loadingError, setLoadingError] = useState(false);
   const [forceFetch, setForceFetch] = useState(0);
@@ -193,34 +194,32 @@ const LinkField = ({
     if ((!focusOnID && !focusOnNewLink) || loading) {
       return;
     }
-    let c = 0;
-    const interval = setInterval(() => {
-      if (focusOnID && linkButtonRefs[focusOnID].current) {
-        // Multi linkfield
-        linkButtonRefs[focusOnID].current.focus();
-        clearInterval(interval);
-      } else if (focusOnNewLink) {
-        // Non-multi linkfield
-        if (linkIDs.length === 0) {
-          // User opened modal but did exited instead of saving
-          clearInterval(interval);
-        } else {
-          // User opened modal and created a new link
-          const linkID = linkIDs[0];
-          if (linkButtonRefs[linkID].current) {
-            linkButtonRefs[linkID].current.focus();
-            clearInterval(interval);
-          }
+    if (focusOnID && linkButtonRefs[focusOnID].current) {
+      // Multi linkfield
+      setFocusOnIDWhenAvailable(focusOnID);
+    } else if (focusOnNewLink) {
+      // Non-multi linkfield
+      // If linkIDs.length === 0 then user opened modal but exited instead of saving
+      // i.e. no new link to focus on, so don't need to do anything
+      if (linkIDs.length !== 0) {
+        // User opened modal and created a new link
+        const linkID = linkIDs[0];
+        if (linkButtonRefs[linkID].current) {
+          setFocusOnIDWhenAvailable(linkID);
         }
       }
-      // Safety check
-      if (++c >= 50) {
-        clearInterval(interval);
-      }
-    }, 50);
+    }
     setFocusOnID(0);
     setFocusOnNewLink(false);
-  }, [focusOnID, focusOnNewLink, loading]);
+  }, [focusOnID, focusOnNewLink, loading, linkIDs]);
+
+  useEffect(() => {
+    if (focusOnIDWhenAvailable === 0 || loading) {
+      return;
+    }
+    linkButtonRefs[focusOnIDWhenAvailable].current.focus();
+    setFocusOnIDWhenAvailable(0);
+  }, [focusOnIDWhenAvailable, loading]);
 
   /**
    * Unset the editing ID when the editing modal is closed