fix(input, input-number, input-text, text-area): ensure all applicable props are considered in form validation

packages/calcite-components/src/components.d.ts

@@ -4862,6 +4862,11 @@ export namespace Components {
           * Made into a prop for testing purposes only
          */
         "messages": TextAreaMessages;
+        /**
+          * Specifies the minimum number of characters allowed.
+          * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)
+         */
+        "minLength": number;
         /**
           * Specifies the name of the component.
           * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)
@@ -12354,6 +12359,11 @@ declare namespace LocalJSX {
           * Made into a prop for testing purposes only
          */
         "messages"?: TextAreaMessages;
+        /**
+          * Specifies the minimum number of characters allowed.
+          * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)
+         */
+        "minLength"?: number;
         /**
           * Specifies the name of the component.
           * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)

packages/calcite-components/src/components/input-number/input-number.tsx

@@ -70,6 +70,11 @@ import { InputNumberMessages } from "./assets/input-number/t9n";
 import { CSS, SLOTS } from "./resources";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
+import {
+  NumericInputComponent,
+  syncHiddenFormInput,
+  TextualInputComponent,
+} from "../input/common/input";
 
 /**
  * @slot action - A slot for positioning a button next to the component.
@@ -86,7 +91,9 @@ export class InputNumber
     FormComponent,
     InteractiveComponent,
     LocalizedComponent,
+    NumericInputComponent,
     T9nComponent,
+    TextualInputComponent,
     LoadableComponent
 {
   //--------------------------------------------------------------------------
@@ -798,9 +805,7 @@ export class InputNumber
   };
 
   syncHiddenFormInput(input: HTMLInputElement): void {
-    input.type = "number";
-    input.min = this.min?.toString(10) ?? "";
-    input.max = this.max?.toString(10) ?? "";
+    syncHiddenFormInput("number", this, input);
   }
 
   private onHiddenFormInputInput = (event: Event): void => {

packages/calcite-components/src/components/input-text/input-text.tsx

@@ -50,6 +50,7 @@ import { InputTextMessages } from "./assets/input-text/t9n";
 import { CSS, SLOTS } from "./resources";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
+import { syncHiddenFormInput, TextualInputComponent } from "../input/common/input";
 
 /**
  * @slot action - A slot for positioning a button next to the component.
@@ -67,6 +68,7 @@ export class InputText
     InteractiveComponent,
     LoadableComponent,
     LocalizedComponent,
+    TextualInputComponent,
     T9nComponent
 {
   //--------------------------------------------------------------------------
@@ -494,13 +496,7 @@ export class InputText
   };
 
   syncHiddenFormInput(input: HTMLInputElement): void {
-    if (this.minLength != null) {
-      input.minLength = this.minLength;
-    }
-
-    if (this.maxLength != null) {
-      input.maxLength = this.maxLength;
-    }
+    syncHiddenFormInput("text", this, input);
   }
 
   private onHiddenFormInputInput = (event: Event): void => {

packages/calcite-components/src/components/input/common/input.ts

@@ -0,0 +1,62 @@
+export type InputComponent = NumericInputComponent | TextualInputComponent;
+
+export interface NumericInputComponent {
+  min: number;
+  max: number;
+  step: number | "any";
+}
+
+export interface TextualInputComponent {
+  pattern?: string;
+  minLength: number;
+  maxLength: number;
+}
+
+const minMaxStepTypes = ["date", "datetime-local", "month", "number", "range", "time", "week"];
+const patternTypes = ["email", "password", "search", "tel", "text", "url"];
+const minMaxLengthTypes = ["email", "password", "search", "tel", "text", "textarea", "url"];
+
+function toString(num: number): string {
+  return num?.toString() ?? "";
+}
+
+/**
+ * Synchronizes the hidden form input with the validation-related input properties.
+ *
+ * @param type - The input type.
+ * @param inputComponent
+ * @param hiddenFormInput
+ */
+export function syncHiddenFormInput(
+  type: HTMLInputElement["type"] | "textarea",
+  inputComponent: InputComponent,
+  hiddenFormInput: HTMLInputElement,
+): void {
+  hiddenFormInput.type = type === "textarea" ? "text" : type;
+
+  if (minMaxStepTypes.includes(type)) {
+    const numericInputComponent = inputComponent as NumericInputComponent;
+    hiddenFormInput.min = toString(numericInputComponent.min);
+    hiddenFormInput.max = toString(numericInputComponent.max);
+
+    const step = numericInputComponent.step;
+    hiddenFormInput.step = step === "any" ? step : toString(step);
+  }
+
+  if (minMaxLengthTypes.includes(type)) {
+    const textualInputComponent = inputComponent as TextualInputComponent;
+
+    if (hiddenFormInput.minLength != null) {
+      hiddenFormInput.minLength = textualInputComponent.minLength;
+    }
+
+    if (hiddenFormInput.maxLength != null) {
+      hiddenFormInput.maxLength = textualInputComponent.maxLength;
+    }
+  }
+
+  if (patternTypes.includes(type)) {
+    const textualInputComponent = inputComponent as TextualInputComponent;
+    hiddenFormInput.pattern = textualInputComponent.pattern || "";
+  }
+}

packages/calcite-components/src/components/input/input.tsx

@@ -71,6 +71,7 @@ import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "./interfac
 import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
+import { NumericInputComponent, syncHiddenFormInput, TextualInputComponent } from "./common/input";
 
 /**
  * @slot action - A slot for positioning a `calcite-button` next to the component.
@@ -88,7 +89,9 @@ export class Input
     InteractiveComponent,
     T9nComponent,
     LocalizedComponent,
-    LoadableComponent
+    LoadableComponent,
+    NumericInputComponent,
+    TextualInputComponent
 {
   //--------------------------------------------------------------------------
   //
@@ -884,22 +887,7 @@ export class Input
   };
 
   syncHiddenFormInput(input: HTMLInputElement): void {
-    const { type } = this;
-
-    input.type = type;
-
-    if (type === "number") {
-      input.min = this.min?.toString(10) ?? "";
-      input.max = this.max?.toString(10) ?? "";
-    } else if (type === "text") {
-      if (this.minLength != null) {
-        input.minLength = this.minLength;
-      }
-
-      if (this.maxLength != null) {
-        input.maxLength = this.maxLength;
-      }
-    }
+    syncHiddenFormInput(this.type, this, input);
   }
 
   private onHiddenFormInputInput = (event: Event): void => {

packages/calcite-components/src/components/text-area/text-area.tsx

@@ -50,6 +50,7 @@ import { CharacterLengthObj } from "./interfaces";
 import { guid } from "../../utils/guid";
 import { Status } from "../interfaces";
 import { Validation } from "../functional/Validation";
+import { syncHiddenFormInput, TextualInputComponent } from "../input/common/input";
 
 /**
  * @slot - A slot for adding text.
@@ -70,7 +71,8 @@ export class TextArea
     LocalizedComponent,
     LoadableComponent,
     T9nComponent,
-    InteractiveComponent
+    InteractiveComponent,
+    Omit<TextualInputComponent, "pattern">
 {
   //--------------------------------------------------------------------------
   //
@@ -117,6 +119,13 @@ export class TextArea
    */
   @Prop() label: string;
 
+  /**
+   * Specifies the minimum number of characters allowed.
+   *
+   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)
+   */
+  @Prop({ reflect: true }) minLength: number;
+
   /**
    * Specifies the maximum number of characters allowed.
    *
@@ -189,7 +198,7 @@ export class TextArea
   @Prop({ reflect: true }) status: Status = "idle";
 
   /** The component's value. */
-  @Prop({ mutable: true }) value: string;
+  @Prop({ mutable: true }) value = "";
 
   /**
    * Specifies the wrapping mechanism for the text.
@@ -479,6 +488,8 @@ export class TextArea
     if (this.isCharacterLimitExceeded()) {
       input.setCustomValidity(this.replacePlaceHoldersInMessages());
     }
+
+    syncHiddenFormInput("textarea", this, input);
   }
 
   setTextAreaEl = (el: HTMLTextAreaElement): void => {
@@ -534,7 +545,7 @@ export class TextArea
       }
     },
     RESIZE_TIMEOUT,
-    { leading: false }
+    { leading: false },
   );
 
   private isCharacterLimitExceeded(): boolean {