From bcca27b79a6d623ee3bdb5f02b9a5c8a6fca7130 Mon Sep 17 00:00:00 2001
From: Aseer KT <aseermiqdad@gmail.com>
Date: Tue, 6 Aug 2024 21:17:53 +0530
Subject: [PATCH] chore: remove shift enter behaviour from message composer

---
 .../message/components/MessageComposer.tsx    | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/web/src/features/message/components/MessageComposer.tsx b/web/src/features/message/components/MessageComposer.tsx
index df8782c..ad40001 100644
--- a/web/src/features/message/components/MessageComposer.tsx
+++ b/web/src/features/message/components/MessageComposer.tsx
@@ -25,9 +25,9 @@ export const MessageComposer = ({
   const [disabled, setDisabled] = useState(false)
   const socketRef = useRef(getSocketIO())
   const timeoutRef = useRef<NodeJS.Timeout>()
-  const textAreaRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
 
-  useAutoFocus(textAreaRef, [groupId, receiverId, replyMessage])
+  useAutoFocus(inputRef, [groupId, receiverId, replyMessage])
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value)
@@ -80,17 +80,17 @@ export const MessageComposer = ({
     handleComposeMessage()
   }
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault()
-    }
-    if (event.key === 'Enter') {
-      if (!event.shiftKey) {
-        event.preventDefault()
-        handleComposeMessage()
-      }
-    }
-  }
+  // const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  //   if (event.key === 'Enter' && !event.shiftKey) {
+  //     event.preventDefault()
+  //   }
+  //   if (event.key === 'Enter') {
+  //     if (!event.shiftKey) {
+  //       event.preventDefault()
+  //       handleComposeMessage()
+  //     }
+  //   }
+  // }
 
   return (
     <form
@@ -106,6 +106,7 @@ export const MessageComposer = ({
               content={replyMessage.content}
             />
             <Button
+              type='button'
               size='sm'
               variant='secondary'
               className='text-xs font-semibold'
@@ -119,12 +120,12 @@ export const MessageComposer = ({
       )}
       <div className='flex gap-2'>
         <input
-          ref={textAreaRef}
+          ref={inputRef}
           className='w-full flex-1 rounded border p-3'
           value={text}
           autoFocus
           placeholder='Send message...'
-          onKeyDown={handleKeyDown}
+          // onKeyDown={handleKeyDown}
           onChange={handleChange}
         />
         <Button disabled={disabled} aria-label='send message'>