From 3d7ce5afd5fb1c15b90cd5e12816d8755b307d96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Tue, 14 Nov 2023 21:52:38 +0200
Subject: [PATCH] feat(text-input): form submission (#2647)

---
 .changeset/input-submit.md                    |  4 ++++
 .../pf-text-input/demo/form-submission.html   | 24 +++++++++++++++++++
 elements/pf-text-input/pf-text-input.ts       | 15 ++++++++++--
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/input-submit.md
 create mode 100644 elements/pf-text-input/demo/form-submission.html

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/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 e1d5ce2ae3..a22b15a515 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
@@ -233,8 +234,9 @@ 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}"
              ?disabled="${this.matches(':disabled') || this.disabled}"
              ?readonly="${this.readonly}"
@@ -260,6 +262,15 @@ export class PfTextInput extends LitElement {
     this.#touched = true;
   }
 
+  #onKeydown(event: Event) {
+    switch ((event as KeyboardEvent).key) {
+      case 'Enter':
+        if (this.reportValidity()) {
+          this.#internals.form?.requestSubmit(null);
+        }
+    }
+  }
+
   #onBlur() {
     if (this.validateOn === 'blur') {
       this.checkValidity();