feat(TextArea): expose onKeydown on TextArea (#2532)

Author: saurabhdaware

.changeset/twenty-planets-tell.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(TextArea): expose `onKeydown` on TextArea and allow `numOfLines={1}`

packages/blade/src/components/Input/BaseInput/BaseInput.tsx

@@ -229,7 +229,7 @@ type BaseInputCommonProps = FormInputLabelProps &
     /**
      * Sets the textarea's number of lines
      */
-    numberOfLines?: 2 | 3 | 4 | 5;
+    numberOfLines?: 1 | 2 | 3 | 4 | 5;
     /**
      * Sets the accessibility label for the input
      */

packages/blade/src/components/Input/TextArea/TextArea.stories.tsx

@@ -10,6 +10,7 @@ import { Button } from '~components/Button';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 import { Box } from '~components/Box';
 import { Text } from '~components/Typography';
+import { ToastContainer, useToast } from '~components/Toast';
 
 const propsCategory = {
   BASE_PROPS: 'TextArea Props',
@@ -462,6 +463,26 @@ export const TextAreaWithTags: StoryFn<typeof TextAreaComponent> = ({ ...args })
   );
 };
 
+export const TextAreaWithEnterSubmit: StoryFn<typeof TextAreaComponent> = ({ ...args }) => {
+  const toast = useToast();
+  return (
+    <Box display="flex" flexDirection="column">
+      <ToastContainer />
+      <TextAreaComponent
+        {...args}
+        numberOfLines={3}
+        placeholder="Press Shift + Enter for next line and Enter for submit"
+        onKeyDown={({ event, value }) => {
+          if (!event.shiftKey && event.key === 'Enter') {
+            event.preventDefault();
+            toast.show({ content: `Submit: ${value}`, color: 'positive', type: 'informational' });
+          }
+        }}
+      />
+    </Box>
+  );
+};
+
 export const TextAreaWithControlledTags: StoryFn<typeof TextAreaComponent> = ({ ...args }) => {
   const [tags, setTags] = React.useState<string[]>([]);
 

packages/blade/src/components/Input/TextArea/TextArea.tsx

@@ -21,6 +21,7 @@ import type {
   DataAnalyticsAttribute,
 } from '~utils/types';
 import { hintMarginTop } from '~components/Form/formTokens';
+import type { FormInputOnKeyDownEvent } from '~components/Form/FormTypes';
 
 type TextAreaCommonProps = Pick<
   BaseInputProps,
@@ -57,6 +58,16 @@ type TextAreaCommonProps = Pick<
    * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
    */
   onClearButtonClick?: () => void;
+
+  onKeyDown?: ({
+    name,
+    value,
+    event,
+  }: {
+    name?: FormInputOnKeyDownEvent['name'];
+    value: string;
+    event: FormInputOnKeyDownEvent['event'];
+  }) => void;
 } & TaggedInputProps &
   StyledPropsBlade;
 
@@ -114,6 +125,7 @@ const _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps>
     onFocus,
     onBlur,
     onSubmit,
+    onKeyDown,
     placeholder,
     value,
     maxCharacters,
@@ -244,6 +256,11 @@ const _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps>
       }}
       onKeyDown={(e) => {
         handleTaggedInputKeydown(e);
+        onKeyDown?.({
+          name: e.name,
+          value: e.event.currentTarget.value,
+          event: e.event,
+        });
       }}
       onSubmit={onSubmit}
       trailingFooterSlot={(value) => {