Merge pull request #1345 from dxc-technology/gomezivann-submitValue-fix

Fix Select and Radio Group from submitting its value when disabled
dxc-technology · Oct 26, 2022 · 6b419d9 · 6b419d9
2 parents 2f47857 + 929a5cf
commit 6b419d9
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 1 deletion.
diff --git a/lib/src/radio-group/RadioGroup.test.js b/lib/src/radio-group/RadioGroup.test.js
@@ -51,6 +51,29 @@ describe("Radio Group component tests", () => {
     const radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-orientation")).toBe("horizontal");
   });
+  test("Sends its value when submitted", () => {
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({ radiogroup: "5" });
+    });
+    const { getByText, getByRole, getAllByRole } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcRadioGroup
+          name="radiogroup"
+          label="test-radio-group-label"
+          options={options}
+        />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const radioGroup = getByRole("radiogroup");
+    const submit = getByText("Submit");
+    userEvent.click(radioGroup);
+    userEvent.click(getAllByRole("radio")[4]);
+    userEvent.click(submit);
+  });
   test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", () => {
     const { getByRole, getAllByRole } = render(
       <DxcRadioGroup label="test-radioGroup-label" options={options} disabled />
@@ -86,6 +109,28 @@ describe("Radio Group component tests", () => {
     expect(radios[1].tabIndex).toBe(-1);
     expect(radios[2].tabIndex).toBe(-1);
   });
+  test("Disabled radio group doesn't send its value when submitted", () => {
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({});
+    });
+    const { getByText } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcRadioGroup
+          name="radiogroup"
+          defaultValue="1"
+          disabled
+          label="test-radio-group-label"
+          options={options}
+        />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const submit = getByText("Submit");
+    userEvent.click(submit);
+  });
   test("Error state renders with correct aria attributes", () => {
     const { getByRole, getByText } = render(
       <DxcRadioGroup label="test-radioGroup-label" options={options} error="Error message" />

diff --git a/lib/src/radio-group/RadioGroup.tsx b/lib/src/radio-group/RadioGroup.tsx
@@ -142,7 +142,13 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
             aria-readonly={readonly}
             aria-orientation={stacking === "column" ? "vertical" : "horizontal"}
           >
-            <input type="hidden" name={name} value={value ?? innerValue ?? ""} />
+            <ValueInput
+              name={name}
+              disabled={disabled}
+              value={value ?? innerValue ?? ""}
+              readOnly
+              aria-hidden="true"
+            />
             {innerOptions.map((option, index) => (
               <DxcRadio
                 key={`radio-${index}`}
@@ -219,6 +225,10 @@ const RadioGroup = styled.div<RadioGroupProps>`
   column-gap: ${(props) => props.theme.groupHorizontalGutter};
 `;
 
+const ValueInput = styled.input`
+  display: none;
+`;
+
 const Error = styled.span`
   min-height: 1.5em;
   color: ${(props) => props.theme.errorMessageColor};

diff --git a/lib/src/select/Select.test.js b/lib/src/select/Select.test.js
@@ -278,6 +278,31 @@ describe("Select component tests", () => {
     expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
     expect(submitInput.value).toBe("4,2,6,3");
   });
+  test("Sends its value when submitted", () => {
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({ options: "1,5,3" });
+    });
+    const { getByText, getByRole, getAllByRole } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcSelect
+          name="options"
+          label="test-select-label"
+          defaultValue={["1", "5"]}
+          options={single_options}
+          multiple
+        />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const select = getByRole("combobox");
+    const submit = getByText("Submit");
+    userEvent.click(select);
+    userEvent.click(getAllByRole("option")[2]);
+    userEvent.click(submit);
+  });
   test("Disabled select - Cannot gain focus or open the listbox via click", () => {
     const { getByRole, queryByRole } = render(
       <DxcSelect label="test-select-label" value={["1", "2"]} options={single_options} disabled />
@@ -318,6 +343,22 @@ describe("Select component tests", () => {
     expect(queryByRole("listbox")).toBeFalsy();
     expect(document.activeElement === select).toBeFalsy();
   });
+  test("Disabled select - Doesn't send its value when submitted", () => {
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({});
+    });
+    const { getByText } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcSelect label="test-select-label" defaultValue={"1"} options={single_options} disabled />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const submit = getByText("Submit");
+    userEvent.click(submit);
+  });
   test("Controlled - Single selection - Not optional constraint", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();

diff --git a/lib/src/select/Select.tsx b/lib/src/select/Select.tsx
@@ -356,6 +356,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
                 <SearchableValueContainer>
                   <ValueInput
                     name={name}
+                    disabled={disabled}
                     value={multiple ? (value ?? innerValue).join(",") : value ?? innerValue}
                     readOnly
                     aria-hidden="true"