diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 7f9c6f10b3..32b979e958 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -55,11 +55,17 @@ const createBaseComponent = async (
break;
case ComponentType.AddressInput:
await page.getByPlaceholder("Title").fill(title || "");
- await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
+ await page.getByRole("combobox", { name: "Data field" }).click();
+ await page
+ .getByRole("combobox", { name: "Data field" })
+ .fill(options?.[0] || "");
break;
case ComponentType.ContactInput:
await page.getByPlaceholder("Title").fill(title || "");
- await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
+ await page.getByRole("combobox", { name: "Data field" }).click();
+ await page
+ .getByRole("combobox", { name: "Data field" })
+ .fill(options?.[0] || "");
break;
case ComponentType.TaskList:
await page.getByPlaceholder("Main Title").fill(title || "");
@@ -112,15 +118,24 @@ const createBaseComponent = async (
}
break;
case ComponentType.FileUpload:
- await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
+ await page.getByRole("combobox", { name: "Data field" }).click();
+ await page
+ .getByRole("combobox", { name: "Data field" })
+ .fill(options?.[0] || "");
break;
case ComponentType.FileUploadAndLabel:
await page.getByPlaceholder("File type").fill(options?.[0] || "");
- await page.getByPlaceholder("Data Field").fill(options?.[1] || "");
+ await page.getByRole("combobox", { name: "Data field" }).click();
+ await page
+ .getByRole("combobox", { name: "Data field" })
+ .fill(options?.[1] || "");
break;
case ComponentType.List:
await page.getByPlaceholder("Title").fill(title || "");
- await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
+ await page.getByRole("combobox", { name: "Data field" }).click();
+ await page
+ .getByRole("combobox", { name: "Data field" })
+ .fill(options?.[0] || "");
break;
case ComponentType.Content:
await page
@@ -176,7 +191,9 @@ export const createQuestionWithDataFieldOptions = async (
await locatingNode.click();
await page.getByRole("dialog").waitFor();
await page.getByPlaceholder("Text").fill(questionText);
- await page.getByPlaceholder("Data Field").fill(dataField);
+ await page.getByRole("combobox", { name: "Data field" }).click();
+ await page.getByRole("combobox", { name: "Data field" }).fill(dataField);
+ await page.getByRole("combobox", { name: "Data field" }).press("Enter");
await createComponentOptionsWithDataValues(page, options);
await page.locator('button[form="modal"][type="submit"]').click();
};
@@ -377,12 +394,13 @@ async function createComponentOptionsWithDataValues(
page: Page,
options: OptionWithDataValues[],
) {
- let index = 0;
for (const option of options) {
await page.locator("button").filter({ hasText: "add new" }).click();
- await page.getByPlaceholder("Option").nth(index).fill(option.optionText);
- await page.getByPlaceholder("Data Value").nth(index).fill(option.dataValue);
- index++;
+ await page.getByPlaceholder("Option").last().fill(option.optionText);
+ await page.getByRole("combobox", { name: "Data field" }).last().click();
+ await page
+ .getByRole("option", { name: option.dataValue, exact: true })
+ .click();
}
}
diff --git a/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx b/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
index 35a9a643a1..839f45a51c 100644
--- a/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
@@ -9,6 +9,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";
import { AddressInput, parseAddressInput } from "./model";
@@ -25,8 +26,9 @@ export default function AddressInputComponent(props: Props): FCReturn {
});
}
},
- validate: () => {},
+ validate: () => { },
});
+
return (
);
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
index c5fa9ee02b..13d2afa804 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -16,6 +16,8 @@ import ErrorWrapper from "ui/shared/ErrorWrapper";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
+import { getOptionsSchemaByFn } from "@planx/components/shared/utils";
+import { useStore } from "pages/FlowEditor/lib/store";
import { Option } from "../../shared";
import type { Group } from "../model";
import ChecklistOptionsEditor from "./OptionsEditor";
@@ -28,6 +30,10 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
const exclusiveOrOptionManagerShouldRender =
hasFeatureFlag("EXCLUSIVE_OR") && nonExclusiveOptions.length;
+
+ const schema = useStore().getFlowSchema()?.options;
+ const initialOptions: Option[] | undefined = formik.initialValues.options || formik.initialValues.groupedOptions?.map((group: Group