fix(text-input): form validation on submit

elements/pf-text-input/demo/form-submission.html

@@ -0,0 +1,24 @@
+<form id="pf-form">
+  <label for="input">Input</label>
+  <pf-text-input id="input" required></pf-text-input>
+  <p>Form status: <output name="status">unsubmitted</output></p>
+</form>
+
+<style>
+label {
+  display: block;
+}
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-text-input/pf-text-input.js';
+
+  document
+    .querySelector('#pf-form')
+    .addEventListener('submit', function(event) {
+      event.preventDefault();
+      this.elements.status.textContent = 'Submitted';
+    });
+</script>
+
+<link rel="stylesheet" href="demo.css">

elements/pf-text-input/pf-text-input.ts

@@ -234,7 +234,7 @@ export class PfTextInput extends LitElement {
       <input id="input"
              .placeholder="${this.placeholder ?? ''}"
              .value="${this.value}"
-             .pattern="${this.pattern as string}"
+             pattern="${ifDefined(this.pattern)}"
              @input="${this.#onInput}"
              @keydown="${this.#onKeydown}"
              @blur="${this.#onBlur}"
@@ -265,7 +265,9 @@ export class PfTextInput extends LitElement {
   #onKeydown(event: Event) {
     switch ((event as KeyboardEvent).key) {
       case 'Enter':
-        this.#internals.form?.requestSubmit(null);
+        if (this.reportValidity()) {
+          this.#internals.form?.requestSubmit(null);
+        }
     }
   }