fix: tree looses focus after renaming item

Author: lukasbach

packages/core/src/controlledEnvironment/useControlledTreeEnvironmentProps.ts

@@ -122,9 +122,16 @@ export const useControlledTreeEnvironmentProps = ({
     [onDropProp, updateLinearItems]
   );
 
+  const focusTree = useCallback((treeId: string) => {
+    const focusItem = document.querySelector(
+      `[data-rct-tree="${treeId}"] [data-rct-item-focus="true"]`
+    );
+    (focusItem as HTMLElement)?.focus?.();
+  }, []);
+
   const setActiveTree = useCallback(
     (treeIdOrSetStateFunction, autoFocusTree = true) => {
-      const focusTree = (treeId: string | undefined) => {
+      const maybeFocusTree = (treeId: string | undefined) => {
         if (
           autoFocusTree &&
           (autoFocus ?? true) &&
@@ -133,10 +140,7 @@ export const useControlledTreeEnvironmentProps = ({
             .querySelector(`[data-rct-tree="${treeId}"]`)
             ?.contains(document.activeElement)
         ) {
-          const focusItem = document.querySelector(
-            `[data-rct-tree="${treeId}"] [data-rct-item-focus="true"]`
-          );
-          (focusItem as HTMLElement)?.focus?.();
+          focusTree(treeId);
         }
       };
 
@@ -145,18 +149,18 @@ export const useControlledTreeEnvironmentProps = ({
           const treeId = treeIdOrSetStateFunction(oldValue);
 
           if (treeId !== oldValue) {
-            focusTree(treeId);
+            maybeFocusTree(treeId);
           }
 
           return treeId;
         });
       } else {
         const treeId = treeIdOrSetStateFunction;
         setActiveTreeId(treeId);
-        focusTree(treeId);
+        maybeFocusTree(treeId);
       }
     },
-    [autoFocus]
+    [autoFocus, focusTree]
   );
 
   const renderers = useRenderers(props);

packages/core/src/treeItem/TreeItemRenamingInput.tsx

@@ -22,7 +22,7 @@ export const TreeItemRenamingInput: React.FC<{
   const submitButtonRef = useRef<any>(null);
   const item = environment.items[props.itemIndex];
   const [title, setTitle] = useState(environment.getItemTitle(item));
-  const callSoon = useCallSoon();
+  const callSoon = useCallSoon(true);
 
   const abort = () => {
     environment.onAbortRenamingItem?.(item, treeInformation.treeId);

packages/core/src/useCallSoon.ts

@@ -6,23 +6,21 @@ import { useCallback, useEffect, useRef } from 'react';
  *
  * @returns A function that can be used to schedule a deferred callback.
  */
-export function useCallSoon(): (callback: () => void) => void {
-  // list of pending callbacks
+export function useCallSoon(dontClean = false): (callback: () => void) => void {
   const handleRef = useRef(new Array<number>());
 
-  // if the component is unmounted, cancel any pending callbacks
   useEffect(() => {
-    // can't use handleRef.current in the cleanup function, so we have to
-    // assign it to a new variable here.
+    if (dontClean) {
+      return () => {};
+    }
+
     const handles = handleRef.current;
     return () => handles.forEach(handle => cancelAnimationFrame(handle));
-  }, [handleRef]);
+  }, [dontClean, handleRef]);
 
-  // schedule callback soon and keep handle for later cancellation
-  const callSoon = useCallback(
+  return useCallback(
     (callback: () => void) => {
       const handle = requestAnimationFrame(() => {
-        // remove the handle from the list of pending callbacks
         handleRef.current.splice(handleRef.current.indexOf(handle), 1);
 
         callback();
@@ -32,6 +30,4 @@ export function useCallSoon(): (callback: () => void) => void {
     },
     [handleRef]
   );
-
-  return callSoon;
 }