[Major]Error behaviour when empty string in textInput

projects/dxc-ngx-cdk-site/src/app/components/examples/text-input/text-input-properties/text-input-properties.component.html

@@ -55,9 +55,12 @@
     <td>error: string</td>
     <td></td>
     <td>
-      If it is defined, the component will change its appearance, showing the
-      error below the input component. If it is not defined, the error messages
-      will be created and managed internally.
+      If it is a defined value and also a truthy string, the component will
+      change its appearance, showing the error below the input component. If the
+      defined value is an empty string, it will reserve a space below the
+      component for a future error, but it would not change its look. In case of
+      being undefined or null, both the appearance and the space for the error
+      message would not be modified.
     </td>
   </tr>
   <tr>
@@ -81,20 +84,22 @@
     <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user types within the input. The new
-      value will be passed as a parameter.
+      This event will emit when the user types within the input element
+      of the component. An object including the current value and the error (if
+      the value entered is not valid) will be passed to this function. An
+      example of this object is: { value: value, error: error }. If there is no
+      error, error will not be defined.
     </td>
   </tr>
   <tr>
     <td>onBlur: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the input loses the focus. An object
+      This event will emit when the input element loses the focus. An object
       including the input value and the error (if the value entered is not
-      valid) will be passed to this function. An example of this object is:
-      {{ "{" }}
-      <code>value: value, error: error</code>
-      {{ "}" }}. If there is no error, error will be null.
+      valid) will be passed to this function. An example of this object is: {
+      value: value, error: error }. If there is no error, error will not be
+      defined.
     </td>
   </tr>
   <tr>

projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.html

@@ -172,4 +172,6 @@
   </ul>
 </div>
 
-<span *ngIf="error && !disabled" class="inputErrorMessage">{{ error }}</span>
+<span *ngIf="(error || error === '') && !disabled" class="inputErrorMessage">{{
+  error
+}}</span>

projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.spec.ts

@@ -147,7 +147,7 @@ describe("DxcNewTextInputComponent", () => {
     expect(input.getByText("helper text"));
     expect(screen.getByDisplayValue("test input value")).toBeTruthy();
     fireEvent.click(input.getByLabelText("Clear"));
-    expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
   });
 
   test("should allow interaction with action button", async () => {
@@ -238,7 +238,7 @@ describe("DxcNewTextInputComponent", () => {
     expect(input.getByText("helper text"));
     expect(screen.getByDisplayValue("test input value")).toBeTruthy();
     fireEvent.click(input.getByRole("textbox"));
-    expect(onChange).not.toHaveBeenCalledWith({ value: "", error: null });
+    expect(onChange).not.toHaveBeenCalledWith({ value: "", error: undefined });
   });
 
   test("controlled dxc-input-text input change and blur", async () => {
@@ -265,9 +265,9 @@ describe("DxcNewTextInputComponent", () => {
     fireEvent.click(input);
     expect(screen.getByDisplayValue("initial"));
     fireEvent.input(input, { target: { value: "new value" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalledWith({ error: null, value: "initial" });
+    expect(onBlur).toHaveBeenCalledWith({ error: undefined, value: "initial" });
     await waitFor(() => {
       expect(screen.getByDisplayValue("initial"));
     });
@@ -296,9 +296,9 @@ describe("DxcNewTextInputComponent", () => {
     fireEvent.click(input);
     expect(screen.getByDisplayValue(""));
     fireEvent.input(input, { target: { value: "new value" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalledWith({ error: null, value: "new value" });
+    expect(onBlur).toHaveBeenCalledWith({ error: undefined, value: "new value" });
     await waitFor(() => {
       expect(screen.getByDisplayValue("new value"));
     });
@@ -353,15 +353,15 @@ describe("DxcNewTextInputComponent", () => {
     fireEvent.click(input);
     expect(screen.getByDisplayValue("initial string"));
     fireEvent.input(input, { target: { value: "new value" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
     await waitFor(() => {
       fireEvent.blur(input);
       expect(onBlur).toHaveBeenCalledWith({
-        error: null,
+        error: undefined,
         value: "initial string",
       });
       fireEvent.click(screen.getByLabelText("Clear"));
-      expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+      expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
       screen.getByDisplayValue("initial string");
     });
   });
@@ -407,7 +407,7 @@ describe("DxcNewTextInputComponent", () => {
     });
     fireEvent.click(screen.getByLabelText("Clear"));
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+      expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
       expect(screen.getByDisplayValue("initial"));
     });
   });
@@ -454,7 +454,7 @@ describe("DxcNewTextInputComponent", () => {
     });
     fireEvent.click(screen.getByLabelText("Clear"));
     await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+      expect(onChange).toHaveBeenCalledWith({ value: "", error: undefined });
       expect(screen.getByDisplayValue("initial"));
     });
   });
@@ -484,11 +484,11 @@ describe("DxcNewTextInputComponent", () => {
     fireEvent.click(input);
     expect(screen.getByDisplayValue("initial string"));
     fireEvent.input(input, { target: { value: "new value" } });
-    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: null });
+    expect(onChange).toHaveBeenCalledWith({ value: "new value", error: undefined });
     await waitFor(() => {
       fireEvent.blur(input);
       expect(onBlur).toHaveBeenCalledWith({
-        error: null,
+        error: undefined,
         value: "initial string",
       });
       fireEvent.click(screen.getByLabelText("Clear"));

projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts

@@ -110,7 +110,7 @@ export class DxcTextInputComponent
    * the error below the input component. If it is not defined, the error
    * messages will be managed internally, but never displayed on its own.
    */
-  @Input() error: string = "";
+  @Input() error: string = undefined;
   /**
    * Regular expression that defines the valid format allowed by the input.
    * This will be checked when the input loses the focus. If the value entered
@@ -167,7 +167,7 @@ export class DxcTextInputComponent
 
   defaultInputs = new BehaviorSubject<TextInputProperties>({
     placeholder: "",
-    error: "",
+    error: undefined,
     clearable: false,
     optional: false,
     disabled: false,
@@ -504,7 +504,7 @@ export class DxcTextInputComponent
       return `Min length ${this.minLength}, Max length ${this.maxLength}`;
     if (value && !this.patternMatch(this.pattern, value))
       return `Please use a valid pattern`;
-    return null;
+    return undefined;
   }
 
   private handleValidationError() {

projects/dxc-ngx-cdk/src/lib/dxc-text-input/emitted-value.type.ts

@@ -1,6 +1,6 @@
 type EmittedValue = {
   value: string;
-  error: string;
+  error?: string;
 };
 
 export default EmittedValue;