fix: clear values array on additional input type change

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 (
+          <>
+            <AdditionalInput
+              {...defaultProps}
+              item={itemWithValues}
+            />
+            <div data-testid="values-count">
+              {values.meta_fields[0].values.length}
+            </div>
+          </>
+        );
+      };
+
+      render(
+        <Formik
+          initialValues={{ meta_fields: [itemWithValues] }}
+          onSubmit={jest.fn()}
+        >
+          <Form>
+            <TestWrapper />
+          </Form>
+        </Formik>
+      );
+
+      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 (
+          <>
+            <AdditionalInput
+              {...defaultProps}
+              item={itemWithValues}
+            />
+            <div data-testid="values-count">
+              {values.meta_fields[0].values.length}
+            </div>
+          </>
+        );
+      };
+
+      render(
+        <Formik
+          initialValues={{ meta_fields: [itemWithValues] }}
+          onSubmit={jest.fn()}
+        >
+          <Form>
+            <TestWrapper />
+          </Form>
+        </Formik>
+      );
+
+      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" };

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) => (
                   <MenuItem key={fieldType} value={fieldType}>