diff --git a/app/client/cypress/integration/Smoke_TestSuite/Binding/InputWidgets_NavigateTo_validation_spec.js b/app/client/cypress/integration/Smoke_TestSuite/Binding/InputWidgets_NavigateTo_validation_spec.js index d7d81832b6..cba595adff 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/Binding/InputWidgets_NavigateTo_validation_spec.js +++ b/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") diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 12141bbbd6..4629a4fe92 100644 --- a/app/client/cypress/support/commands.js +++ b/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 }) diff --git a/app/client/src/components/designSystems/blueprint/InputComponent.tsx b/app/client/src/components/designSystems/blueprint/InputComponent.tsx index 02b923577e..49690b6995 100644 --- a/app/client/src/components/designSystems/blueprint/InputComponent.tsx +++ b/app/client/src/components/designSystems/blueprint/InputComponent.tsx @@ -136,6 +136,22 @@ class InputComponent extends React.Component< return "text"; } } + onKeyDownTextArea = (e: React.KeyboardEvent) => { + 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) => { + if (typeof this.props.onKeyDown === "function") { + this.props.onKeyDown(e); + } + }; + private numericInputComponent = () => ( 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 + | React.KeyboardEvent, + ) => void; } export default InputComponent; diff --git a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx index 6409a8ab98..d757a50071 100644 --- a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx +++ b/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, + }, ], }, ], diff --git a/app/client/src/widgets/InputWidget.tsx b/app/client/src/widgets/InputWidget.tsx index f186283381..90427ccd2e 100644 --- a/app/client/src/widgets/InputWidget.tsx +++ b/app/client/src/widgets/InputWidget.tsx @@ -44,6 +44,7 @@ class InputWidget extends BaseWidget { static getTriggerPropertyMap(): TriggerPropertiesMap { return { onTextChanged: true, + onSubmit: true, }; } @@ -136,6 +137,22 @@ class InputWidget extends BaseWidget { this.props.updateWidgetMetaProperty("isFocused", focusState); }; + handleKeyDown = ( + e: + | React.KeyboardEvent + | React.KeyboardEvent, + ) => { + 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 { 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 ( { 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;