add onKeyDown action in TextInput widget (#1045)

Author: anserwaseem

.changeset/few-scissors-confess.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+add onKeyDown action in TextInput widget

apps/kitchen-sink/src/ensemble/screens/forms.yaml

@@ -177,6 +177,8 @@ View:
                         label:
                           Text:
                             text: Text mask input
+                        onChange: console.log("formTextInput onChange", value)
+                        onKeyDown: console.log("formTextInput onKeyDown", event)
                     - TextInput:
                         id: minMaxTextInput
                         inputType: number
@@ -188,6 +190,8 @@ View:
                           required: true
                           maxLength: 3
                         label: Text input with min and max length
+                        onChange: console.log("minMaxTextInput onChange", value)
+                        onKeyDown: console.log("minMaxTextInput onKeyDown", event)
                     - TextInput:
                         id: regexTextInput
                         required: true
@@ -362,6 +366,34 @@ View:
                         label:
                           Text:
                             text: Text input with max length enforcement
+                        onKeyDown:
+                          executeCode: |
+                            console.log("initial_formTextInput onKeyDown", event)
+                    - TextInput:
+                        label: Multiline text 1
+                        hintText: Press enter to submit
+                        multiLine: true
+                        maxLines: 2
+                        submitOnEnter: ${initial_formTextInput?.value?.length > 4}
+                        onChange: console.log("TextArea 1 onChange", value)
+                        onKeyDown: |
+                          if (event.key === 'Enter' && !event.shiftKey) {
+                            event.preventDefault();
+                            myForm2.submit();
+                          }
+                    - TextInput:
+                        id: textArea2
+                        label: Multiline text 2
+                        hintText: Type freely
+                        multiline: true
+                        maxLines: 2
+                        onChange: console.log("TextArea 2 onChange", value)
+                        onKeyDown:
+                          executeCode: |
+                            console.log("TextArea 2 onKeyDown", event)
+                    - Button:
+                        label: toggle 'Multiline text 2' to submit on Enter
+                        onChange: textArea2.setSubmitOnEnter(textArea2?.submitOnEnter ?? true)
                     - MultiSelect:
                         id: initial_multiselectoptions1
                         label: Choose multiple from API or storage

packages/runtime/src/widgets/Form/TextInput.tsx

@@ -1,19 +1,12 @@
 import { Input, Form, ConfigProvider } from "antd";
 import type { Expression, EnsembleAction } from "@ensembleui/react-framework";
 import { useRegisterBindings } from "@ensembleui/react-framework";
-import {
-  useEffect,
-  useMemo,
-  useState,
-  useCallback,
-  useRef,
-  type FormEvent,
-  RefCallback,
-} from "react";
+import { useEffect, useMemo, useState, useCallback, useRef } from "react";
+import type { RefCallback, FormEvent } from "react";
 import { runes } from "runes2";
 import type { Rule } from "antd/es/form";
-import { forEach } from "lodash-es";
-import IMask, { InputMask } from "imask";
+import { forEach, isObject, omitBy } from "lodash-es";
+import IMask, { type InputMask } from "imask";
 import type { EnsembleWidgetProps } from "../../shared/types";
 import { WidgetRegistry } from "../../registry";
 import type { TextStyles } from "../Text";
@@ -26,7 +19,10 @@ const widgetName = "TextInput";
 export type TextInputProps = {
   hintStyle?: TextStyles;
   labelStyle?: TextStyles;
+  /** @deprecated see {@link TextInputProps.multiline} */
   multiLine?: Expression<boolean>;
+  /** Specify whether this Text Input should span multiple lines */
+  multiline?: Expression<boolean>;
   maxLines?: number;
   maxLength?: Expression<number>;
   maxLengthEnforcement?: Expression<
@@ -42,6 +38,7 @@ export type TextInputProps = {
     regexError?: string;
     maskError?: string;
   };
+  onKeyDown: EnsembleAction;
 } & EnsembleWidgetProps<TextStyles> &
   FormInputProps<string>;
 
@@ -62,6 +59,7 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
   );
   const formInstance = Form.useFormInstance();
   const action = useEnsembleAction(props.onChange);
+  const onKeyDownAction = useEnsembleAction(props.onKeyDown);
 
   const handleChange = useCallback(
     (newValue: string) => {
@@ -76,7 +74,7 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
     rootRef(node);
   };
 
-  const handleKeyDown = useCallback((e: FormEvent<HTMLInputElement>) => {
+  const sanitizeNumberInput = useCallback((e: FormEvent<HTMLInputElement>) => {
     const target = e.target as HTMLInputElement;
     target.value = target.value.replace(/[^0-9.]/g, "");
   }, []);
@@ -92,6 +90,17 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
     [handleChange, mask],
   );
 
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) =>
+      onKeyDownAction?.callback({
+        event: {
+          ...omitBy(event, isObject),
+          preventDefault: event.preventDefault.bind(event),
+        },
+      }),
+    [onKeyDownAction],
+  );
+
   useEffect(() => {
     setValue(values?.initialValue);
   }, [values?.initialValue]);
@@ -252,12 +261,13 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
       theme={{ token: { colorTextPlaceholder: values?.hintStyle?.color } }}
     >
       <EnsembleFormItem rules={rules} valuePropName="value" values={values}>
-        {values?.multiLine ? (
+        {values?.multiLine || values?.multiline ? (
           <Input.TextArea
             count={maxLengthConfig}
             defaultValue={values.value}
             disabled={values.enabled === false}
-            onChange={(event): void => setValue(event.target.value)}
+            onChange={(event): void => handleChange(event.target.value)}
+            onKeyDown={handleKeyDown}
             placeholder={values.hintText ?? ""}
             ref={rootRef}
             rows={values.maxLines ? Number(values.maxLines) : 4} // Adjust the number of rows as needed
@@ -276,8 +286,9 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
             disabled={values?.enabled === false}
             onChange={(event): void => handleChange(event.target.value)}
             {...(values?.inputType === "number" && {
-              onInput: (event): void => handleKeyDown(event),
+              onInput: (event): void => sanitizeNumberInput(event),
             })}
+            onKeyDown={handleKeyDown}
             onPaste={handleInputPaste}
             placeholder={values?.hintText ?? ""}
             ref={handleRef}

packages/runtime/src/widgets/Form/__tests__/TextInput.test.tsx

@@ -326,5 +326,36 @@ describe("TextInput", () => {
       );
     });
   });
+
+  test("logs event object onKeyDown for numeric TextInput", async () => {
+    render(
+      <Form
+        children={[
+          {
+            name: "TextInput",
+            properties: {
+              label: "Number input",
+              id: "numberInput",
+              type: "number",
+              onKeyDown: {
+                executeCode: "console.log(event)",
+              },
+            },
+          },
+          ...defaultFormButton,
+        ]}
+        id="form"
+      />,
+      { wrapper: FormTestWrapper },
+    );
+    const input = screen.getByLabelText("Number input");
+    userEvent.type(input, "2");
+
+    await waitFor(() => {
+      expect(logSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ key: "2" }),
+      );
+    });
+  });
 });
 /* eslint-enable react/no-children-prop */