add support for an onSubmit action for the input widget (#2749)

app/client/cypress/integration/Smoke_TestSuite/Binding/InputWidgets_NavigateTo_validation_spec.js

@@ -17,7 +17,9 @@ describe("Binding the multiple Widgets and validating NavigateTo Page", function
   it("Input widget test with default value from table widget", function() {
     cy.openPropertyPane("inputwidget");
     cy.get(widgetsPage.defaultInput).type(testdata.defaultInputWidget);
-    cy.get(widgetsPage.actionSelect).click();
+    cy.get(widgetsPage.actionSelect)
+      .first()
+      .click();
     cy.get(commonlocators.chooseAction)
       .children()
       .contains("Navigate To")

app/client/cypress/support/commands.js

@@ -1262,7 +1262,9 @@ Cypress.Commands.add("togglebarDisable", (value) => {
 });
 
 Cypress.Commands.add("getAlert", (alertcss) => {
-  cy.get(commonlocators.dropdownSelectButton).click({ force: true });
+  cy.get(commonlocators.dropdownSelectButton)
+    .first()
+    .click({ force: true });
   cy.get(widgetsPage.menubar)
     .contains("Show Message")
     .click({ force: true })

app/client/src/components/designSystems/blueprint/InputComponent.tsx

@@ -136,6 +136,22 @@ class InputComponent extends React.Component<
         return "text";
     }
   }
+  onKeyDownTextArea = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const isEnterKey = e.key === "Enter" || e.keyCode === 13;
+    const { disableNewLineOnPressEnterKey } = this.props;
+    if (isEnterKey && disableNewLineOnPressEnterKey && !e.shiftKey) {
+      e.preventDefault();
+    }
+    if (typeof this.props.onKeyDown === "function") {
+      this.props.onKeyDown(e);
+    }
+  };
+  onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (typeof this.props.onKeyDown === "function") {
+      this.props.onKeyDown(e);
+    }
+  };
+
   private numericInputComponent = () => (
     <NumericInput
       value={this.props.value}
@@ -155,6 +171,7 @@ class InputComponent extends React.Component<
       stepSize={this.props.stepSize}
       onFocus={() => this.setFocusState(true)}
       onBlur={() => this.setFocusState(false)}
+      onKeyDown={this.onKeyDown}
     />
   );
   private textAreaInputComponent = () => (
@@ -169,6 +186,7 @@ class InputComponent extends React.Component<
       growVertically={false}
       onFocus={() => this.setFocusState(true)}
       onBlur={() => this.setFocusState(false)}
+      onKeyDown={this.onKeyDownTextArea}
     />
   );
 
@@ -199,6 +217,7 @@ class InputComponent extends React.Component<
         type={this.getType(this.props.inputType)}
         onFocus={() => this.setFocusState(true)}
         onBlur={() => this.setFocusState(false)}
+        onKeyDown={this.onKeyDown}
       />
     );
   private renderInputComponent = (inputType: InputType, isTextArea: boolean) =>
@@ -267,6 +286,12 @@ export interface InputComponentProps extends ComponentProps {
   isInvalid: boolean;
   showError: boolean;
   onFocusChange: (state: boolean) => void;
+  disableNewLineOnPressEnterKey?: boolean;
+  onKeyDown?: (
+    e:
+      | React.KeyboardEvent<HTMLTextAreaElement>
+      | React.KeyboardEvent<HTMLInputElement>,
+  ) => void;
 }
 
 export default InputComponent;

app/client/src/mockResponses/PropertyPaneConfigResponse.tsx

@@ -725,6 +725,15 @@ const PropertyPaneConfigResponse: PropertyPaneConfigsResponse["data"] = {
             controlType: "ACTION_SELECTOR",
             isJSConvertible: true,
           },
+          {
+            id: "5.11.3",
+            helpText:
+              "Triggers an action on submit (when the enter key is pressed)",
+            propertyName: "onSubmit",
+            label: "onSubmit",
+            controlType: "ACTION_SELECTOR",
+            isJSConvertible: true,
+          },
         ],
       },
     ],

app/client/src/widgets/InputWidget.tsx

@@ -44,6 +44,7 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
   static getTriggerPropertyMap(): TriggerPropertiesMap {
     return {
       onTextChanged: true,
+      onSubmit: true,
     };
   }
 
@@ -136,6 +137,22 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
     this.props.updateWidgetMetaProperty("isFocused", focusState);
   };
 
+  handleKeyDown = (
+    e:
+      | React.KeyboardEvent<HTMLTextAreaElement>
+      | React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    const isEnterKey = e.key === "Enter" || e.keyCode === 13;
+    if (isEnterKey && this.props.onSubmit) {
+      super.executeAction({
+        dynamicString: this.props.onSubmit,
+        event: {
+          type: EventType.ON_SUBMIT,
+        },
+      });
+    }
+  };
+
   getPageView() {
     const value = this.props.text || "";
     const isInvalid =
@@ -149,6 +166,7 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
     if (this.props.maxChars) conditionalProps.maxChars = this.props.maxChars;
     if (this.props.maxNum) conditionalProps.maxNum = this.props.maxNum;
     if (this.props.minNum) conditionalProps.minNum = this.props.minNum;
+
     return (
       <InputComponent
         value={value}
@@ -168,6 +186,8 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
         stepSize={1}
         onFocusChange={this.handleFocusChange}
         showError={!!this.props.isFocused}
+        disableNewLineOnPressEnterKey={!!this.props.onSubmit}
+        onKeyDown={this.handleKeyDown}
         {...conditionalProps}
       />
     );
@@ -215,6 +235,7 @@ export interface InputWidgetProps extends WidgetProps, WithMeta {
   isRequired?: boolean;
   isFocused?: boolean;
   isDirty?: boolean;
+  onSubmit?: string;
 }
 
 export default InputWidget;