diff --git a/src/components/mui/__tests__/additional-input.test.js b/src/components/mui/__tests__/additional-input.test.js
index cb604cf4..b64ea51a 100644
--- a/src/components/mui/__tests__/additional-input.test.js
+++ b/src/components/mui/__tests__/additional-input.test.js
@@ -12,9 +12,9 @@
* */
import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
-import { Formik, Form } from "formik";
+import { Formik, Form, useFormikContext } from "formik";
import "@testing-library/jest-dom";
import AdditionalInput from "../formik-inputs/additional-input/additional-input";
@@ -216,6 +216,94 @@ describe("AdditionalInput", () => {
});
});
+ describe("handleTypeChange", () => {
+ test("clears values when switching from an options-based type to a non-options type", async () => {
+ const itemWithValues = {
+ ...defaultItem,
+ type: "CheckBoxList",
+ values: [{ value: "opt1", name: "Option 1", is_default: false }]
+ };
+
+ const TestWrapper = () => {
+ const { values } = useFormikContext();
+ return (
+ <>
+
+
+ {values.meta_fields[0].values.length}
+
+ >
+ );
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("values-count")).toHaveTextContent("1");
+
+ await userEvent.click(screen.getByRole("combobox"));
+ await userEvent.click(await screen.findByRole("option", { name: "CheckBox" }));
+
+ await waitFor(() => {
+ expect(screen.getByTestId("values-count")).toHaveTextContent("0");
+ });
+ });
+
+ test("preserves values when switching between options-based types", async () => {
+ const itemWithValues = {
+ ...defaultItem,
+ type: "CheckBoxList",
+ values: [{ value: "opt1", name: "Option 1", is_default: false }]
+ };
+
+ const TestWrapper = () => {
+ const { values } = useFormikContext();
+ return (
+ <>
+
+
+ {values.meta_fields[0].values.length}
+
+ >
+ );
+ };
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId("values-count")).toHaveTextContent("1");
+
+ await userEvent.click(screen.getByRole("combobox"));
+ await userEvent.click(await screen.findByRole("option", { name: "ComboBox" }));
+
+ await waitFor(() => {
+ expect(screen.getByTestId("values-count")).toHaveTextContent("1");
+ });
+ });
+ });
+
describe("Error display", () => {
test("shows values error when touched and has error", () => {
const itemWithOptions = { ...defaultItem, type: "CheckBoxList" };
diff --git a/src/components/mui/formik-inputs/additional-input/additional-input.js b/src/components/mui/formik-inputs/additional-input/additional-input.js
index ea436df1..fc267572 100644
--- a/src/components/mui/formik-inputs/additional-input/additional-input.js
+++ b/src/components/mui/formik-inputs/additional-input/additional-input.js
@@ -44,11 +44,19 @@ const AdditionalInput = ({
entityId,
isAddDisabled
}) => {
- const { errors, touched, values } = useFormikContext();
+ const { errors, touched, values, setFieldValue } = useFormikContext();
const buildFieldName = (fieldName) => `${baseName}[${itemIdx}].${fieldName}`;
const currentType = getIn(values, buildFieldName("type"));
+ const handleTypeChange = (e) => {
+ const newType = e.target.value;
+ setFieldValue(buildFieldName("type"), newType);
+ if (!METAFIELD_TYPES_WITH_OPTIONS.includes(newType)) {
+ setFieldValue(buildFieldName("values"), []);
+ }
+ };
+
const fieldErrors = getIn(errors, `${baseName}[${itemIdx}]`);
const fieldTouched = getIn(touched, `${baseName}[${itemIdx}]`);
@@ -91,6 +99,7 @@ const AdditionalInput = ({
placeholder={T.translate(
"additional_inputs.placeholders.type"
)}
+ onChange={handleTypeChange}
>
{METAFIELD_TYPES.map((fieldType) => (