From 45cdab6f6c0416e0a01a66e4b4983ff0a52c1afc Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 7 Dec 2022 17:46:49 +0530
Subject: [PATCH] fix: Fixed workspace menu item rename issue

---
 .../ui-services/src/Keyboard/KeyboardKey.ts   |  1 +
 .../WorkspaceSwitcher/WorkspaceMenuItem.tsx   | 92 ++++++++++---------
 2 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/packages/ui-services/src/Keyboard/KeyboardKey.ts b/packages/ui-services/src/Keyboard/KeyboardKey.ts
index ba026027d..270f7c6ee 100644
--- a/packages/ui-services/src/Keyboard/KeyboardKey.ts
+++ b/packages/ui-services/src/Keyboard/KeyboardKey.ts
@@ -9,4 +9,5 @@ export enum KeyboardKey {
   Escape = 'Escape',
   Home = 'Home',
   End = 'End',
+  Space = ' ',
 }
diff --git a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index e1fbc2333..f7abc78b9 100644
--- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -51,54 +51,56 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
   const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(() => {
     renameDescriptor(inputValue)
     setIsRenaming(false)
-    setInputValue('')
   }, [inputValue, renameDescriptor])
 
   return (
-    <MenuRadioButtonItem
-      className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-      onClick={onClick}
-      checked={descriptor.primary}
-    >
-      <div className="ml-2 flex w-full items-center justify-between">
-        {isRenaming ? (
-          <input
-            ref={inputRef}
-            type="text"
-            value={inputValue}
-            onChange={handleChange}
-            onKeyDown={handleInputKeyDown}
-            onBlur={handleInputBlur}
-          />
-        ) : (
-          <div>{descriptor.label}</div>
-        )}
-        {descriptor.primary && !hideOptions && (
-          <div className="flex items-center">
-            <a
-              role="button"
-              className="mr-3 h-5 w-5 cursor-pointer border-0 bg-transparent p-0 hover:bg-contrast"
-              onClick={(e) => {
-                e.stopPropagation()
-                setIsRenaming((isRenaming) => !isRenaming)
-              }}
-            >
-              <Icon type="pencil" className="text-neutral" size="medium" />
-            </a>
-            <a
-              role="button"
-              className="h-5 w-5 cursor-pointer border-0 bg-transparent p-0 hover:bg-contrast"
-              onClick={(e) => {
-                e.stopPropagation()
-                onDelete()
-              }}
-            >
-              <Icon type="trash" className="text-danger" size="medium" />
-            </a>
-          </div>
-        )}
-      </div>
-    </MenuRadioButtonItem>
+    <div className="relative">
+      <MenuRadioButtonItem
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={onClick}
+        checked={descriptor.primary}
+      >
+        <div className="ml-2 flex w-full items-center justify-between">
+          {!isRenaming && <div>{descriptor.label}</div>}
+          {descriptor.primary && !hideOptions && (
+            <div className="flex items-center">
+              <a
+                role="button"
+                className="mr-3 flex h-5 w-5 cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:bg-contrast"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setIsRenaming((isRenaming) => !isRenaming)
+                }}
+              >
+                <Icon type="pencil" className="text-neutral" size="medium" />
+              </a>
+              <a
+                role="button"
+                className="flex h-5 w-5 cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:bg-contrast"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onDelete()
+                }}
+              >
+                <Icon type="trash" className="text-danger" size="medium" />
+              </a>
+            </div>
+          )}
+        </div>
+      </MenuRadioButtonItem>
+      {isRenaming && (
+        <input
+          ref={inputRef}
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          onKeyDown={handleInputKeyDown}
+          onBlur={handleInputBlur}
+          onClick={(e) => e.stopPropagation()}
+          className="absolute top-1/2 left-11 -translate-y-1/2 bg-default"
+        />
+      )}
+    </div>
   )
 }