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) => (