diff --git a/packages/main/src/features/InputElementsFormSupport.js b/packages/main/src/features/InputElementsFormSupport.js index 9f6b3ab32f21..d8eb6a99889e 100644 --- a/packages/main/src/features/InputElementsFormSupport.js +++ b/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); } diff --git a/packages/main/test/pages/form.html b/packages/main/test/pages/form.html index 98924ea7ebdf..d0d26cc386d9 100644 --- a/packages/main/test/pages/form.html +++ b/packages/main/test/pages/form.html @@ -107,7 +107,16 @@