Fix keydown handler placement in NameModal

Co-authored-by: ArnavSingh76533 <160649079+ArnavSingh76533@users.noreply.github.com>

components/input/InputText.tsx

@@ -9,6 +9,7 @@ interface Props {
   required?: boolean
   className?: string
   icon?: any
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
 }
 
 const InputText: FC<Props> = ({
@@ -18,6 +19,7 @@ const InputText: FC<Props> = ({
   icon,
   className = "",
   required = false,
+  onKeyDown,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null)
   return (
@@ -38,6 +40,7 @@ const InputText: FC<Props> = ({
         type={"text"}
         required={required}
         onFocus={() => inputRef.current?.select()}
+        onKeyDown={onKeyDown}
       />
       {value && (
         <div className={"p-2 cursor-pointer hover:text-red-400 transition-colors"} onClick={() => onChange("")}>

components/modal/NameModal.tsx

@@ -36,21 +36,20 @@ const NameModal: FC<Props> = ({ show, onSubmit }) => {
           Please enter your name to join this room. This will be your display name visible to other participants.
         </p>
         <div>
-          <div onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              handleSubmit()
-            }
-          }}>
-            <InputText
-              value={name}
-              placeholder="Your display name"
-              onChange={(value) => {
-                setName(value)
-                setError("")
-              }}
-              required
-            />
-          </div>
+          <InputText
+            value={name}
+            placeholder="Your display name"
+            onChange={(value) => {
+              setName(value)
+              setError("")
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleSubmit()
+              }
+            }}
+            required
+          />
           {error && (
             <p className="text-red-500 text-sm mt-2">{error}</p>
           )}