diff --git a/lib/src/radio-group/RadioGroup.test.js b/lib/src/radio-group/RadioGroup.test.js
index f92fca323..c7f2595cb 100644
--- 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(
+
+ );
+ 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(
@@ -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(
+
+ );
+ const submit = getByText("Submit");
+ userEvent.click(submit);
+ });
test("Error state renders with correct aria attributes", () => {
const { getByRole, getByText } = render(
diff --git a/lib/src/radio-group/RadioGroup.tsx b/lib/src/radio-group/RadioGroup.tsx
index 016b50159..7ad244e5a 100644
--- a/lib/src/radio-group/RadioGroup.tsx
+++ b/lib/src/radio-group/RadioGroup.tsx
@@ -142,7 +142,13 @@ const DxcRadioGroup = React.forwardRef(
aria-readonly={readonly}
aria-orientation={stacking === "column" ? "vertical" : "horizontal"}
>
-
+
{innerOptions.map((option, index) => (
`
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
index 07fe007a4..2bc514426 100644
--- 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(
+
+ );
+ 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(
@@ -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(
+
+ );
+ 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
index d1141a8e4..3623e6186 100644
--- a/lib/src/select/Select.tsx
+++ b/lib/src/select/Select.tsx
@@ -356,6 +356,7 @@ const DxcSelect = React.forwardRef(