Bug Description

Affected Version: v2 (didn't occur in v1)
Affected Components: Let's take the ui5-input as example, but it applies to all other form components as well
Used Framework: React & UI5-WCR

Bug 1: Submit Event Triggered Too Soon

When the user presses Enter, the submit event is triggered immediately. However, other events aren't triggered beforehand, most prominently the change event isn't triggered before the submit event.

Just to be clear: It works when you click the submit button manually, because you leave the field by clicking the button and thereby trigger the change event. So this bug really only occurs when "Enter" is pressed via keyboard or send via mobile scanner device when stuff is scanned.

This is required, however, to implement any form validation solution. Using the change event was a workable and general way for us to hook our validation solution into UI5-WC, which doesn't work anymore. This bug makes it hard to use any validation framework; we are using react-hook-form, for example.

Our workaround attempts are based to turn off that submit behavior.

Bug 2: The Enter-Behavior Should Be Opt-In

While it's kind of best practice to use Enter as form submit, this doesn't hold true for all use cases.
We, for example, often want to use Enter as way to focus the next input field instead of submitting the whole form.

Example: Mobile scanner device: you scan a QR code value into one field and the device also adds an emulated Enter. Because you might need to scan multiple things (eg. product and batch) we want to focus the next field, so that the workflow of the employee won't get interrupted.

Hence, it would be cool to consciously opt-in to the submit behavior.

Affected Component

All Form Inputs

Expected Behaviour

1. Change and other events are triggered before submit
2. Behavior of Enter within input fields needs to be customizable (or at least opt-in to submit behavior)

Isolated Example

https://stackblitz.com/edit/js-ozhtujoe?file=index.js

Steps to Reproduce

1. Open "Console" in example
2. Enter some value into the standard input and press "Enter"
3. See the logged results: 1. change event, 2. submit event
4. Same procedure with the UI5-Input
5. Result: Reversed order

Log Output, Stack Trace or Screenshots

No response

Priority

High

UI5 Web Components Version

2.6.2, but probably 2.x

Browser

Chrome, Firefox, Safari, Edge

Operating System

Windows

Additional Context

No response

Organization

No response

Declaration

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