Merge pull request #1365 from dxc-technology/aida-form-input

Fixed text input's action that executed form submit when clicked

Author: GomezIvann

lib/src/number-input/NumberInput.test.js

@@ -262,4 +262,28 @@ describe("Number input component tests", () => {
     const increment = getAllByRole("button")[1];
     expect(increment.getAttribute("aria-label")).toBe("Increment value");
   });
+
+  test("Number input submits correct values in a form", () => {
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({ data: "0" });
+    });
+    const { getByText, getAllByRole } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcNumberInput label="Number input label" name="data" />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const less = getAllByRole("button")[0];
+    const more = getAllByRole("button")[1];
+    const submit = getByText("Submit");
+    userEvent.click(more);
+    expect(handlerOnSubmit).not.toHaveBeenCalled();
+    userEvent.click(less);
+    expect(handlerOnSubmit).not.toHaveBeenCalled();
+    userEvent.click(submit);
+    expect(handlerOnSubmit).toHaveBeenCalled();
+  });
 });

lib/src/password-input/PasswordInput.tsx

@@ -66,16 +66,14 @@ const DxcPasswordInput = React.forwardRef<RefType, PasswordInputPropsType>(
       }
     }, [isPasswordVisible]);
 
-    const viewPassword = (event) => {
+    const viewPassword = () => {
       setInputType("text");
       setIsPasswordVisible(true);
-      event.preventDefault();
     };
 
-    const hidePassword = (event) => {
+    const hidePassword = () => {
       setInputType("password");
       setIsPasswordVisible(false);
-      event.preventDefault();
     };
 
     const action = {

lib/src/text-input/TextInput.test.js

@@ -296,6 +296,47 @@ describe("TextInput component tests", () => {
     userEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
+  test("Text input submit correctly value in form", () => {
+    const onClick = jest.fn();
+    const action = {
+      onClick: onClick,
+      icon: (
+        <svg
+          data-testid="image"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="currentColor"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
+        </svg>
+      ),
+      title: "Search",
+    };
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({ data: "test" });
+    });
+    const { getByText, getAllByRole, getByRole } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcTextInput label="Input label" name="data" action={action} />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const search = getAllByRole("button")[0];
+    const submit = getByText("Submit");
+    const input = getByRole("textbox");
+    userEvent.type(input, "test");
+    expect(input.value).toBe("test");
+    userEvent.click(search);
+    expect(handlerOnSubmit).not.toHaveBeenCalled();
+    userEvent.click(submit);
+    expect(handlerOnSubmit).toHaveBeenCalled();
+  });
   test("Renders with correct prefix and suffix", () => {
     const { getByText } = render(<DxcTextInput label="Input label" prefix="+34" suffix="USD" />);
     expect(getByText("+34")).toBeTruthy();

lib/src/text-input/TextInput.tsx

@@ -463,6 +463,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
                 tabIndex={tabIndex}
                 title={translatedLabels.textInput.clearFieldActionTitle}
                 aria-label={translatedLabels.textInput.clearFieldActionTitle}
+                type="button"
               >
                 {icons.clear}
               </Action>
@@ -480,6 +481,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
                   tabIndex={tabIndex}
                   title={translatedLabels.numberInput.decrementValueTitle}
                   aria-label={translatedLabels.numberInput.decrementValueTitle}
+                  type="button"
                 >
                   {icons.decrement}
                 </Action>
@@ -494,6 +496,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
                   tabIndex={tabIndex}
                   title={translatedLabels.numberInput.incrementValueTitle}
                   aria-label={translatedLabels.numberInput.incrementValueTitle}
+                  type="button"
                 >
                   {icons.increment}
                 </Action>
@@ -511,6 +514,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
                 aria-label={action.title}
                 backgroundType={backgroundType}
                 tabIndex={tabIndex}
+                type="button"
               >
                 {typeof action.icon === "string" ? <ActionIcon src={action.icon}></ActionIcon> : action.icon}
               </Action>

lib/src/text-input/types.ts

@@ -1,5 +1,3 @@
-import React from "react";
-
 type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Margin = {
   top?: Space;
@@ -13,7 +11,7 @@ type Action = {
   /**
    * This function will be called when the user clicks the action.
    */
-  onClick: (event?: React.MouseEvent<HTMLInputElement>) => void;
+  onClick: () => void;
   /**
    * Icon to be shown in the action.
    */