Prevent drag when rename

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx

@@ -240,6 +240,14 @@ const FileSystemGridItem = React.forwardRef(
 
     useOnClickOutside(formRef, formik.submitForm)
 
+    const renameInputRef = useRef<HTMLInputElement | null>()
+
+    useEffect(() => {
+      if (editing && renameInputRef?.current) {
+        renameInputRef.current.focus()
+      }
+    }, [editing])
+
     return (
       <div
         className={classes.gridViewContainer}
@@ -285,7 +293,7 @@ const FileSystemGridItem = React.forwardRef(
                       ? t`Please enter a folder name`
                       : t`Please enter a file name`
                     }
-                    autoFocus
+                    ref={renameInputRef}
                   />
                   {
                     !isFolder && extension !== ""  && (

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

@@ -355,6 +355,7 @@ const FileSystemItem = ({
 
   const [, dragMoveRef, preview] = useDrag({
     type: DragTypes.MOVABLE_FILE,
+    canDrag: !editing,
     item: () => {
       if (selectedCids.includes(file.cid)) {
         return { ids: selectedCids }
@@ -401,6 +402,14 @@ const FileSystemItem = ({
 
   const fileOrFolderRef = useRef<any>()
 
+  if (fileOrFolderRef?.current) {
+    if (editing) {
+      fileOrFolderRef.current.draggable = false
+    } else {
+      fileOrFolderRef.current.draggable = true
+    }
+  }
+
   if (!editing && desktop) {
     dragMoveRef(fileOrFolderRef)
     if (isFolder) {
@@ -409,6 +418,7 @@ const FileSystemItem = ({
     }
   }
 
+
   const onSingleClick = useCallback(
     (e) => {
       if (desktop) {

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { makeStyles, createStyles, useThemeSwitcher, useOnClickOutside, LongPressEvents } from "@chainsafe/common-theme"
 import { t } from "@lingui/macro"
 import clsx from "clsx"
@@ -203,6 +203,14 @@ const FileSystemTableItem = React.forwardRef(
 
     useOnClickOutside(formRef, formik.submitForm)
 
+    const renameInputRef = useRef<HTMLInputElement | null>()
+
+    useEffect(() => {
+      if (editing && renameInputRef?.current) {
+        renameInputRef.current.focus()
+      }
+    }, [editing])
+
     return (
       <TableRow
         data-cy="row-file-item"
@@ -259,7 +267,7 @@ const FileSystemTableItem = React.forwardRef(
                       ? t`Please enter a folder name`
                       : t`Please enter a file name`
                     }
-                    autoFocus
+                    ref={renameInputRef}
                   />
                   {
                     !isFolder && extension !== "" && (