fix(formEnablement): enable required attribute (#5133)

Fixes #3498

Author: fifoosid

packages/main/src/features/InputElementsFormSupport.js

@@ -7,12 +7,25 @@ class FormSupport {
 	 * @param nativeInputUpdateCallback - determines how the native input's disabled and value properties are calculated
 	 */
 	static syncNativeHiddenInput(element, nativeInputUpdateCallback) {
-		const needsNativeInput = !!element.name;
-		let nativeInput = element.querySelector("input[type=hidden][data-ui5-form-support]");
+		const needsNativeInput = !!element.name || element.required;
+		let nativeInput = element.querySelector("input[data-ui5-form-support]");
 		if (needsNativeInput && !nativeInput) {
 			nativeInput = document.createElement("input");
-			nativeInput.type = "hidden";
+
+			nativeInput.style.clip = "rect(0 0 0 0)";
+			nativeInput.style.clipPath = "inset(50%)";
+			nativeInput.style.height = "1px";
+			nativeInput.style.overflow = "hidden";
+			nativeInput.style.position = "absolute";
+			nativeInput.style.whiteSpace = "nowrap";
+			nativeInput.style.width = "1px";
+			nativeInput.style.bottom = "0";
+			nativeInput.setAttribute("tabindex", "-1");
+			nativeInput.required = element.required;
 			nativeInput.setAttribute("data-ui5-form-support", "");
+
+			nativeInput.addEventListener("focusin", event => element.focus());
+
 			nativeInput.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms
 			element.appendChild(nativeInput);
 		}

packages/main/test/pages/form.html

@@ -107,7 +107,16 @@ <h3> Input type 'URL'</h3>
 		<input type="submit" />
 	</form>
 
+	<form method="get" id="form1">
+		
+		<ui5-input required>
+		</ui5-input>
+		<input required>
+
 
+		<ui5-button submits>Submits forms</ui5-button>
+		<input type="submit" />
+	</form>
 </body>
 
 </html>