Button: submit event is never called inside a form

[Lukas742]

Bug Description

When clicking a Button to submit a form, the form is submitted, but it's not possible to listen to the submit event.

Expected Behavior

A clear and concise description of what you expect to happen.

Steps to Reproduce

1. Go to codeSandbox and open the dev tools
2. Click on the HTML button --> onSubmit is called and default behavior is prevented
3. Click on UI5 WC button --> the form submits without going into the callback

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-77tf2?file=/index.html

Context

• UI5 Web Components version: 1.0.0.rc-15

Possible Solution

This is happening because of the submit() called inside InputElementsFormSupport. I tried to fix it but came along some problems, which is why I opened an issue instead of a PR.

My solution was to replace submit with dispatchEvent(new Event('submit', { bubbles: true })), unfortunately this does not validate the form, so required on one of the inputs would be ignored. (Since there is an open issue regarding the required attribute of web-components, I tested it with HTML inputs.) All that can be solved by using requestSubmit() which is basically acting like a button has been clicked and therefore is submitting the form and firing the submit callback after validating. This is not available for IE and Safari, though.

In summary, I couldn't find a way to validate the form when clicking on a button in IE or Safari, but was able to make it call the listener in all browsers. Maybe you have an idea how also the validation is working consistently.

My approach:
Affected file: https://github.com/SAP/ui5-webcomponents/blob/master/packages/main/src/features/InputElementsFormSupport.js

  static triggerFormSubmit(element) {
    if (!element.submits) {
      return;
    }
    let currentElement = element.parentElement;
    while (currentElement && currentElement.tagName.toLowerCase() !== 'form') {
      currentElement = currentElement.parentElement;
    }
    if (currentElement) {
      if (isIE() || isSafari()) {
        currentElement.dispatchEvent(new Event('submit', { bubbles: true })); // validation is not working
      } else {
        currentElement.requestSubmit(); // not available with IE and Safari
      }
    } else {
      console.error(`${element} is not within a form. Please add it in a form.`); // eslint-disable-line
    }
  }

[Shtilianova]

Hello @SAP/ui5-webcomponents-topic-core colleagues,
This ticket looks related to this one #3755.
Kind regards, Diana