From 1e95171582dcc8d4e3ac8dad1ce96502ab6e8da3 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Tue, 7 Nov 2023 17:25:19 +0200
Subject: [PATCH 1/3] feat(text-input): form submission

---
 .changeset/input-submit.md              | 4 ++++
 elements/pf-text-input/pf-text-input.ts | 8 ++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/input-submit.md

diff --git a/.changeset/input-submit.md b/.changeset/input-submit.md
new file mode 100644
index 0000000000..91c95230d1
--- /dev/null
+++ b/.changeset/input-submit.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-text-input>`: pressing `Enter` will request to submit the form
diff --git a/elements/pf-text-input/pf-text-input.ts b/elements/pf-text-input/pf-text-input.ts
index e1d5ce2ae3..29a5e9bdf9 100644
--- a/elements/pf-text-input/pf-text-input.ts
+++ b/elements/pf-text-input/pf-text-input.ts
@@ -235,6 +235,7 @@ export class PfTextInput extends LitElement {
              .value="${this.value}"
              .pattern="${this.pattern as string}"
              @input="${this.#onInput}"
+             @keydown="${this.#onKeydown}"
              @blur="${this.#onBlur}"
              ?disabled="${this.matches(':disabled') || this.disabled}"
              ?readonly="${this.readonly}"
@@ -260,6 +261,13 @@ export class PfTextInput extends LitElement {
     this.#touched = true;
   }
 
+  #onKeydown(event: Event) {
+    switch ((event as KeyboardEvent).key) {
+      case 'Enter':
+        this.#internals.form?.requestSubmit(null);
+    }
+  }
+
   #onBlur() {
     if (this.validateOn === 'blur') {
       this.checkValidity();

From 29076f6381137cbd135fafc0cdce1ba168b56b62 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Tue, 7 Nov 2023 20:41:40 +0200
Subject: [PATCH 2/3] style: jsdoc

---
 elements/pf-text-input/pf-text-input.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/elements/pf-text-input/pf-text-input.ts b/elements/pf-text-input/pf-text-input.ts
index 29a5e9bdf9..d08ab8ddde 100644
--- a/elements/pf-text-input/pf-text-input.ts
+++ b/elements/pf-text-input/pf-text-input.ts
@@ -156,7 +156,8 @@ export class PfTextInput extends LitElement {
   /** Trim text on left */
   @property({ type: Boolean, reflect: true, attribute: 'left-truncated' }) leftTruncated = false;
 
-  /** Value to indicate if the input is modified to show that validation state.
+  /**
+   * Value to indicate if the input is modified to show that validation state.
    * If set to success, input will be modified to indicate valid state.
    * If set to warning,  input will be modified to indicate warning state.
    * Invalid inputs will display an error state

From 3ec82a6f649159591e33cdc5ee27cd1aa3480416 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Tue, 14 Nov 2023 17:43:21 +0200
Subject: [PATCH 3/3] fix(text-input): form validation on submit

---
 .../pf-text-input/demo/form-submission.html   | 24 +++++++++++++++++++
 elements/pf-text-input/pf-text-input.ts       |  6 +++--
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 elements/pf-text-input/demo/form-submission.html

diff --git a/elements/pf-text-input/demo/form-submission.html b/elements/pf-text-input/demo/form-submission.html
new file mode 100644
index 0000000000..b314ab251f
--- /dev/null
+++ b/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">
diff --git a/elements/pf-text-input/pf-text-input.ts b/elements/pf-text-input/pf-text-input.ts
index d08ab8ddde..a22b15a515 100644
--- a/elements/pf-text-input/pf-text-input.ts
+++ b/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);
+        }
     }
   }