[Form]: Unable to use requestSubmit in v2

[Nemin32]

Describe the bug

Hello,

We've been using UI5 v1 in our project and have relied on the UI5 Form component acting as an actual HTML <form> component, which may be submitted using the requestSubmit method called on the form's ref. However, during our migration to v2, we experienced unusual fatal errors which we tracked down to requestSubmit being undefined.

From what we could find, the new ui5-form element doesn't support submitting with either the requestSubmit method, a Button component set to type="Submit", or by calling dispatchEvent. Instead it relies on a call to _internals.form.requestSubmit() (see here) which also doesn't work, because the _internals.form elem remains null. This is also a problem, because we rely on React Hook Form, which needs a proper form to work.

This is currently blocking us from finishing the upgrade. The migration docs mention the Form element being a drop-in replacement to the v1 variant, so I would kindly ask for your help how to make the new component work with our workflow.

Thank you for your assistance.

Isolated Example

No response

Reproduction steps

1. Navigate to this example page
2. Fill out the form
3. Click submit
4. Nothing happens.

Expected Behaviour

The contents of the form are alerted out to the user, due to the onSubmit event firing.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.1.0

UI5 Web Components Version

2.2.0

Browser

Firefox

Operating System

MacOSX 15

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

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

[Lukas742]

Hi @Nemin32

unfortunately our Form Handling section is outdated, until we've updated it I will hide it from the Storybook for v2. Sorry for the inconvenience.

I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

As a workaround, you can wrap your Form component in an html form and apply all logic there (e.g. onSubmit). Here you can find an example of how this could be achieved: https://stackblitz.com/edit/github-mh8hto?file=src%2FApp.tsx

---

Hi Colleagues,

please check if the Form should behave like an actual HTML form element. If not, this should probably be outlined in the documentation.

I've prepared an StackBlitz example showing the differences between a form, a ui5-form and a ui5-form wrapped inside a form: https://stackblitz.com/edit/github-ltccua?file=main.js,index.html,package.json

[IlianaB]

Hello @SAP/ui5-webcomponents-topic-core , please check out this issue about requestSubmit method not being supported for ui5-form.

Regards,
Iliana

[Nemin32]

Hi, thank you for the quick reply! @Lukas742 your workaround works great, we're able to proceed.

[nnaydenow]

Hi @Nemin32,

as @Lukas742 said the ui5-form component doesn't come with build in form html element inside it. It is used as layout component that arranges labels and form fields (like input fields) pairs into a specific number of columns.

Everyone is using forms in its own way so we left this to be handled separately with the solution that Lukas provided.

We will revise the description of the component to give more clear statement about this.

Thanks!

Regards,
Nayden

[ilhan007]

Hi @Nemin32, @Lukas742

The Form web component is a layout, it isn't a replacement for the form HTML element. The Form web component does not provide any APIs for form submission and this is now stated explicitly with this PR.

What Lukas suggested above is the way to go.