Default social input send behavior

Author: Ronan-Fernandes

packages/components/modules/__shared__/web/SocialInput/__storybook__/SocialInput.mdx

@@ -30,6 +30,7 @@ import { Meta } from '@storybook/addon-docs'
 - **submit** (function): Form submission handler.
 - **onCancelReply** (function, optional): Handler for canceling a reply.
 - **form** (UseFormReturn): react-hook-form form instance.
+- **onKeyDown** (function, optional): Custom keydown handler for the input field. Defaults to send with CTRL + Enter
 
 ## Notes
 
@@ -63,6 +64,12 @@ const MyComponent = () => {
       submit={() => {}}
       onCancelReply={() => {}}
       form={useForm()}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault()
+          console.log('Enter key pressed')
+        }
+      }}
     />
   )
 }

packages/components/modules/__shared__/web/SocialInput/index.tsx

@@ -68,6 +68,7 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
       SocialUpsertActions = DefaultSocialUpsertActions,
       SubmitActions = DefaultSubmitActions,
       SubmitActionsProps = {},
+      onKeyDown,
       formId = 'text-field-form',
       submit,
       isLoading,
@@ -78,8 +79,8 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
     },
     ref,
   ) => {
-    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
+    const defaultKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+      if (event.key === 'Enter' && event.ctrlKey) {
         event.preventDefault()
         form.handleSubmit(submit)(event)
       }
@@ -93,7 +94,7 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
           inputRef={ref}
           name={SOCIAL_UPSERT_FORM.body}
           control={form.control}
-          onKeyDown={handleKeyDown}
+          onKeyDown={onKeyDown ?? defaultKeyDown}
           placeholder={placeholder}
           autoFocus={autoFocusInput}
           isReply={isReply}

packages/components/modules/__shared__/web/SocialInput/types.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, KeyboardEvent } from 'react'
 
 import { SocialTextFieldProps } from '@baseapp-frontend/design-system/components/web/inputs'
 
@@ -15,6 +15,7 @@ export interface SocialInputProps {
   SocialUpsertActions?: FC
   SubmitActions?: FC<SubmitActionsProps>
   SubmitActionsProps?: Partial<SubmitActionsProps>
+  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void
   formId?: string
   submit: (data: SocialUpsertForm) => void
   isLoading: boolean