feat(text-input): form submission (#2647)

Author: bennypowers

.changeset/input-submit.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-text-input>`: pressing `Enter` will request to submit the form

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

@@ -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();