fix(dashboard): prevent double click on editing (codesandbox#6812)

Author: danilowoz

packages/app/src/app/pages/Dashboard/Components/Folder/FolderCard.tsx

@@ -31,7 +31,7 @@ export const FolderCard: React.FC<FolderItemComponentProps> = ({
     direction="vertical"
     gap={2}
     onClick={onClick}
-    onDoubleClick={onDoubleClick}
+    onDoubleClick={editing ? undefined : onDoubleClick}
     onContextMenu={onContextMenu}
     {...props}
     css={css({

packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx

@@ -247,7 +247,7 @@ export const SandboxCard = ({
     <Stack
       direction="vertical"
       onClick={onClick}
-      onDoubleClick={onDoubleClick}
+      onDoubleClick={editing ? undefined : onDoubleClick}
       onBlur={onBlur}
       onContextMenu={onContextMenu}
       {...props}

packages/app/src/app/pages/Dashboard/Components/VariableGrid/index.tsx

@@ -80,6 +80,7 @@ interface IComponentForTypes {
 const ComponentForTypes: IComponentForTypes = {
   sandbox: React.memo(props => (
     <Sandbox
+      key={props.item.sandbox.id}
       page={props.page}
       item={props.item}
       isScrolling={props.isScrolling}
@@ -92,7 +93,7 @@ const ComponentForTypes: IComponentForTypes = {
       isScrolling={props.isScrolling}
     />
   )),
-  folder: props => <Folder {...props.item} />,
+  folder: props => <Folder key={props.item.name} {...props.item} />,
   repo: props => <Repo {...props.item} isScrolling={props.isScrolling} />,
   'new-folder': props => <CreateFolder {...props.item} />,
   'new-sandbox': () => <NewSandbox />,

packages/app/src/app/pages/Profile/SandboxPicker/index.tsx

@@ -114,7 +114,7 @@ export const SandboxPicker: React.FC<{ closeModal?: () => void }> = ({
             })}
           >
             {collectionsInPath.map(collection => (
-              <Column key={collection.path} data-column>
+              <Column key={`${collection.path}${collection.name}`} data-column>
                 <FolderCard
                   collection={collection}
                   onClick={() => setPath(collection.path)}