Fix focus states in file tree (#393)

packages/web/src/components/apps/panels/explorer.tsx

@@ -281,7 +281,17 @@ function FolderNode(props: {
           }
         />
       </ContextMenuTrigger>
-      <ContextMenuContent>
+      <ContextMenuContent
+        onCloseAutoFocus={(e) => {
+          // This is an important line of code. It is needed to prevent focus
+          // from returning to other elements when this menu is closed. Without this,
+          // when a user clicks "New [file|folder]" or "Rename", the input box will
+          // render and sometimes immediately dismiss because this returns focus to
+          // the button element the user right clicked on, causing the input's onBlur
+          // to trigger.
+          e.preventDefault();
+        }}
+      >
         <ContextMenuItem onClick={props.onNewFile}>New file...</ContextMenuItem>
         <ContextMenuItem onClick={props.onNewfolder}>New folder...</ContextMenuItem>
         <ContextMenuItem onClick={props.onRename}>Rename</ContextMenuItem>
@@ -300,38 +310,22 @@ function EditNameNode(props: {
   const ref = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    const input = ref.current;
-    if (!input) return;
-
-    const focusAndSelect = () => {
-      input.focus();
-      const idx = input.value.lastIndexOf('.');
-      input.setSelectionRange(0, idx === -1 ? input.value.length : idx);
-    };
+    function focusAndSelect() {
+      const input = ref.current;
 
-    focusAndSelect();
-
-    // Re-focus if the input loses focus
-    const handleFocusOut = () => {
-      if (document.activeElement !== input) {
-        focusAndSelect();
+      if (input) {
+        input.focus();
+        const idx = input.value.lastIndexOf('.');
+        input.setSelectionRange(0, idx === -1 ? input.value.length : idx);
       }
-    };
-
-    document.addEventListener('focusin', handleFocusOut);
+    }
 
-    return () => {
-      document.removeEventListener('focusin', handleFocusOut);
-    };
+    // This setTimeout is intentional. We need to draw focus to this
+    // input after the current event loop clears out because other elements
+    // are getting focused in some situations immediately after this renders.
+    setTimeout(focusAndSelect, 0);
   }, []);
 
-  function onBlur(e: React.FocusEvent<HTMLInputElement>) {
-    // Only cancel if the new active element is outside this component
-    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-      props.onCancel();
-    }
-  }
-
   return (
     <input
       ref={ref}
@@ -342,7 +336,7 @@ function EditNameNode(props: {
         '[&::selection]:bg-accent [&::selection]:text-accent-foreground',
       )}
       style={{ paddingLeft: `${props.depth * 12}px` }}
-      onBlur={onBlur}
+      onBlur={props.onCancel}
       onKeyDown={(e) => {
         if (e.key === 'Enter' && ref.current) {
           e.preventDefault();