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

@@ -1,6 +1,6 @@
 'use client'
 
-import { KeyboardEventHandler, forwardRef } from 'react'
+import { KeyboardEvent, KeyboardEventHandler, forwardRef } from 'react'
 
 import { SocialTextField as DefaultSocialTextField } from '@baseapp-frontend/design-system/components/web/inputs'
 
@@ -68,6 +68,7 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
       SocialUpsertActions = DefaultSocialUpsertActions,
       SubmitActions = DefaultSubmitActions,
       SubmitActionsProps = {},
+      onKeyDown,
       formId = 'text-field-form',
       submit,
       isLoading,
@@ -78,11 +79,18 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
     },
     ref,
   ) => {
-    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
+    const defaultKeyDown = (event: KeyboardEvent<HTMLDivElement>, onSubmit: VoidFunction) => {
+      if (event.key === 'Enter' && event.ctrlKey) {
         event.preventDefault()
-        form.handleSubmit(submit)(event)
+        onSubmit()
+      }
+    }
+
+    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+      if (onKeyDown) {
+        onKeyDown(event, () => form.handleSubmit(submit)(event))
       }
+      defaultKeyDown(event, () => form.handleSubmit(submit)(event))
     }
 
     const isCreateButtonDisabled = isLoading || !form.formState.isValid || !form.formState.isDirty

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>, onSubmit: VoidFunction) => void
   formId?: string
   submit: (data: SocialUpsertForm) => void
   isLoading: boolean