From fa3b79c79b9e8cf87a514c89ce785e5f31db8a90 Mon Sep 17 00:00:00 2001
From: Mohamed Daahir <sharaf.13@hotmail.com>
Date: Mon, 1 Jan 2024 20:18:55 +0000
Subject: [PATCH] call onSubmit when the Enter key is pressed in formInput

---
 src/components/core/FormInput.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/core/FormInput.tsx b/src/components/core/FormInput.tsx
index 91fd08d9..00f69eb5 100644
--- a/src/components/core/FormInput.tsx
+++ b/src/components/core/FormInput.tsx
@@ -1,4 +1,4 @@
-import { useState, CSSProperties } from 'react'
+import { useState, CSSProperties, SyntheticEvent } from 'react'
 import styled from 'styled-components'
 
 import { StyledInput } from './Input'
@@ -17,16 +17,23 @@ interface FormInputProps {
 export function FormInput({ onSubmit, style }: FormInputProps) {
   const [value, setValue] = useState('')
 
+  const handleSubmit = (event: SyntheticEvent) => {
+    event.preventDefault()
+    onSubmit(value)
+    setValue('')
+  }
+
   return (
     <Container style={style}>
       <StyledInput
         value={value}
         onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => e.key === 'Enter' && handleSubmit(e)}
         style={{ gridColumn: '1/4', gridRow: '1/1', paddingRight: 96 }}
       />
       <MiniButton
         type="button"
-        onClick={() => onSubmit(value)}
+        onClick={handleSubmit}
         style={{ gridArea: '1/2' }}
       >
         Add