Input: required attribute has no effect

[Lukas742]

Bug Description

The required attribute has no effect when used in a form.

Expected Behavior

When required is set inside a form, it should not be possible to submit the form if the input field has no value, also it should be possible to validate if the form is valid with checkValidity().

Steps to Reproduce

1. Go to https://codesandbox.io/s/ui5-webcomponents-forked-6gwbj?file=/index.html
2. Do not type anything in either of the inputs and then submit the form by clicking the button.
3. See that only the html button is responding to the required attribute and because of that, the checkValidity() method is returning false.
4. Type something into the html input field
5. Click the submit button.
6. See that the form submits its elements and the checkValidity() method is returning true, even though the "UI5-Input" is required and has no value.

Isolated Example

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

Context

• UI5 Web Components version: 1.0.0-rc.14

Possible root cause

The required attribute is missing from the hidden input field, generated for form support.

This is probably because of these lines:

ui5-webcomponents/packages/main/src/features/InputElementsFormSupport.js

Lines 80 to 83 in 97a8713

	const copyDefaultProperties = (element, nativeInput) => {
	nativeInput.disabled = element.disabled;
	nativeInput.value = element.value;
	};

Here, only disabled and value are copied to the hidden input element.

[georgimkv]

Hi @SAP/ui5-webcomponents-topic-rl ,

This issue is well described - ui5-input with attribute required does not work with formElement.checkValidity().
Would you take a look?

Kind regards,
Georgi

[vladitasev]

This is related to the form support feature. I'll have a look.