Merge pull request #104 from Lemoncode/feature/#95-inline-edition-ent…

…er-key Add keydown listener for Enter key to submit text
Lemoncode · Aug 1, 2024 · ef21da7 · ef21da7
2 parents 4ed0846 + 899da6e
commit ef21da7
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/common/components/inline-edit/inline-edit.tsx b/src/common/components/inline-edit/inline-edit.tsx
@@ -38,15 +38,25 @@ export const EditableComponent: React.FC<Props> = props => {
       }
     };
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isEditing && event.key === 'Enter') {
+        setIsEditing(false);
+        onTextSubmit(editText);
+      }
+    };
+
     if (isEditing) {
       inputRef.current?.focus();
       document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleKeyDown);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleKeyDown);
     }
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleKeyDown);
     };
   }, [isEditing, editText]);