Skip to content

[input | ui5-webcomponents-react | typescript]: when we hit enter on input field the form gets submitted. #12221

@achuth2912

Description

@achuth2912

Bug Description

When we have a combination of html form and a ui5-webcomponents-react input component the enter key on the input field submits the form and the form does the required action which cause the browser to redirect to the particular action which is not a expected behaviour.

Affected Component

Input

Expected Behaviour

When we hit Enter on the input field the form must not submit.

Isolated Example

https://stackblitz.com/edit/github-eag7cmcj?file=src%2FApp.tsx

Steps to Reproduce

  1. Run the app provided on the example
    2.Go to any input field and just hit enter from the keyboard.
    3.We will see the form being submitted automatically on hit of enter on the input field.

I suspect this is happening from the input.ts file
https://github.com/SAP/ui5-webcomponents/blob/main/packages/main/src/Input.ts#L843

This input submit on
https://github.com/SAP/ui5-webcomponents/blob/main/packages/base/src/features/InputElementsFormSupport.ts#L45

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.12.0

Browser

Chrome

Operating System

Mac | Windows

Additional Context

No response

Organization

SAP

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Completed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions