From 4392053b3eda56ecdc2b9d5b9174fa949c838f2a Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 3 Jan 2025 13:43:38 +0100
Subject: [PATCH] feat: autocomplete data fields in the editor (#4062)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Dafydd Llŷr Pearson <DafyddLlyr@gmail.com>
---
 .../src/create-flow-with-geospatial.spec.ts   |   4 +
 e2e/tests/ui-driven/src/create-flow.spec.ts   |  12 +-
 .../ui-driven/src/helpers/addComponent.ts     |  43 ++-
 .../ui-driven/src/helpers/userActions.ts      |   4 +-
 .../@planx/components/AddressInput/Editor.tsx |  19 +-
 .../@planx/components/Calculate/Editor.tsx    |  17 +-
 .../components/Checklist/Editor/Editor.tsx    |  20 +-
 .../components/Checklist/Editor/Options.tsx   |  17 +-
 .../Checklist/Editor/OptionsEditor.tsx        |   2 +
 .../@planx/components/ContactInput/Editor.tsx |  17 +-
 .../@planx/components/DateInput/Editor.tsx    |  15 +-
 .../@planx/components/FileUpload/Editor.tsx   |  30 ++-
 .../components/FileUploadAndLabel/Editor.tsx  |  29 +-
 .../src/@planx/components/List/Editor.tsx     |  16 +-
 .../@planx/components/MapAndLabel/Editor.tsx  |  16 +-
 .../@planx/components/NumberInput/Editor.tsx  |  16 +-
 .../src/@planx/components/Page/Editor.tsx     |  16 +-
 .../src/@planx/components/Question/Editor.tsx |  28 +-
 .../components/Question/OptionsEditor.tsx     |   2 +
 .../src/@planx/components/SetValue/Editor.tsx |  16 +-
 .../@planx/components/TextInput/Editor.tsx    |  17 +-
 .../components/shared/BaseOptionsEditor.tsx   |  31 ++-
 .../shared/DataFieldAutocomplete.tsx          | 101 +++++++
 .../src/@planx/components/shared/utils.ts     |  19 ++
 .../lib/__tests__/getFlowSchema.test.ts       | 255 ++++++++++++++++++
 .../src/pages/FlowEditor/lib/store/editor.ts  |  38 ++-
 .../src/ui/shared/AutocompleteInput.tsx       | 122 +++++++++
 27 files changed, 733 insertions(+), 189 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/lib/__tests__/getFlowSchema.test.ts
 create mode 100644 editor.planx.uk/src/ui/shared/AutocompleteInput.tsx

diff --git a/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts b/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts
index 16b46b755e..098c914a85 100644
--- a/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts
+++ b/e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts
@@ -62,6 +62,8 @@ test.describe("Flow creation, publish and preview", () => {
   });
 
   test("Create a flow", async ({ browser }) => {
+    test.setTimeout(60_000);
+
     const page = await getTeamPage({
       browser,
       userId: context.user!.id!,
@@ -107,6 +109,8 @@ test.describe("Flow creation, publish and preview", () => {
   test("Publish and preview flow with geospatial components", async ({
     browser,
   }) => {
+    test.setTimeout(60_000);
+
     const page = await createAuthenticatedSession({
       browser,
       userId: context.user!.id!,
diff --git a/e2e/tests/ui-driven/src/create-flow.spec.ts b/e2e/tests/ui-driven/src/create-flow.spec.ts
index 921e2a54a9..ffb4419353 100644
--- a/e2e/tests/ui-driven/src/create-flow.spec.ts
+++ b/e2e/tests/ui-driven/src/create-flow.spec.ts
@@ -58,6 +58,8 @@ test.describe("Flow creation, publish and preview", () => {
   });
 
   test("Create a flow", async ({ browser }) => {
+    test.setTimeout(60_000);
+
     const page = await getTeamPage({
       browser,
       userId: context.user!.id!,
@@ -231,7 +233,7 @@ test.describe("Flow creation, publish and preview", () => {
     await publishService(page);
   });
 
-  test("Can preview a published flow", async ({
+  test("Can preview a published flow with an external portal", async ({
     browser,
   }: {
     browser: Browser;
@@ -241,12 +243,17 @@ test.describe("Flow creation, publish and preview", () => {
       userId: context.user!.id!,
     });
 
-    await page.goto(`/${context.team.slug}/${serviceProps.slug}`);
+    await navigateToService(page, serviceProps.slug);
 
     await expect(
       page.getByRole("link", { name: "E2E/an-external-portal-service" }),
     ).toBeVisible();
 
+    const previewLink = page.getByRole("link", {
+      name: "Open published service",
+    });
+    await expect(previewLink).toBeVisible();
+
     await page.goto(
       `/${context.team.slug}/${serviceProps.slug}/published?analytics=false`,
     );
@@ -273,6 +280,7 @@ test.describe("Flow creation, publish and preview", () => {
     });
     await clickContinue({ page });
 
+    // The external portal question has been flattened into the overall flow data structure and can be successfully navigated through
     await answerQuestion({
       page,
       title: externalPortalFlowData.title,
diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 7f9c6f10b3..b3140c7f92 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -55,11 +55,19 @@ 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] || "proposal.address");
+      await page.getByRole("combobox", { name: "Data field" }).press("Enter");
       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] || "proposal.contact");
+      await page.getByRole("combobox", { name: "Data field" }).press("Enter");
       break;
     case ComponentType.TaskList:
       await page.getByPlaceholder("Main Title").fill(title || "");
@@ -112,15 +120,27 @@ 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] || "otherDocument");
+      await page.getByRole("combobox", { name: "Data field" }).press("Enter");
       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] || "otherDocument");
+      await page.getByRole("combobox", { name: "Data field" }).press("Enter");
       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] || "proposal.list");
+      await page.getByRole("combobox", { name: "Data field" }).press("Enter");
       break;
     case ComponentType.Content:
       await page
@@ -176,7 +196,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 +399,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/e2e/tests/ui-driven/src/helpers/userActions.ts b/e2e/tests/ui-driven/src/helpers/userActions.ts
index 6229183c02..f70a4d3bb3 100644
--- a/e2e/tests/ui-driven/src/helpers/userActions.ts
+++ b/e2e/tests/ui-driven/src/helpers/userActions.ts
@@ -328,14 +328,14 @@ export async function answerListInput(
   await page
     .getByRole("combobox", { name: "What best describes this unit?" })
     .click();
-  await page.getByRole("option", { name: unitType }).click();
+  await page.getByRole("option", { name: unitType, exact: true }).click();
 
   await page
     .getByRole("combobox", {
       name: "What best describes the tenure of this unit?",
     })
     .click();
-  await page.getByRole("option", { name: tenure }).click();
+  await page.getByRole("option", { name: tenure, exact: true }).click();
 
   await page
     .getByLabel("How many bedrooms does this unit have?")
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 (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -51,16 +53,11 @@ export default function AddressInputComponent(props: Props): FCReturn {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              required
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            required
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
         </ModalSectionContent>
       </ModalSection>
       <ModalFooter formik={formik} />
diff --git a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
index cce4fe5d6d..66b4be10cb 100644
--- a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
@@ -12,6 +12,7 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
 
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import type { Calculate } from "./model";
 import { evaluate, getVariables, parseCalculate } from "./model";
@@ -25,6 +26,7 @@ const ConditionLabel = styled("span")(() => ({
 }));
 
 const UNKNOWN = "unknown";
+
 export default function Component(props: Props) {
   const formik = useFormik({
     initialValues: parseCalculate(props.node?.data),
@@ -123,16 +125,11 @@ export default function Component(props: Props) {
           </InputRow>
         </ModalSectionContent>
         <ModalSectionContent title="Output">
-          <InputRow>
-            <Input
-              required
-              placeholder="output data field"
-              name="output"
-              format="data"
-              value={formik.values.output}
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            required
+            value={formik.values.output}
+            onChange={(value) => formik.setFieldValue("output", value)}
+          />
           <InputRow>
           <Switch            
             checked={formik.values.formatOutputForAutomations}
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
index 3ba495ce53..a197a89170 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
@@ -12,6 +12,7 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
 
+import { DataFieldAutocomplete } from "@planx/components/shared/DataFieldAutocomplete";
 import { Option, parseBaseNodeData } from "../../shared";
 import { ICONS } from "../../shared/icons";
 import type { Checklist } from "../model";
@@ -123,7 +124,6 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                 inputRef={focusRef}
                 required
               />
-
               <ImgInput
                 img={formik.values.img}
                 onChange={(newUrl) => {
@@ -131,7 +131,6 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                 }}
               />
             </InputRow>
-
             <InputRow>
               <RichTextInput
                 name="description"
@@ -140,18 +139,10 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                 onChange={formik.handleChange}
               />
             </InputRow>
-
-            <InputRow>
-              <Input
-                format="data"
-                name="fn"
-                value={formik.values.fn}
-                placeholder="Data Field"
-                onChange={formik.handleChange}
-                error={Boolean(formik.errors?.fn)}
-                errorMessage={formik.errors?.fn}
-              />
-            </InputRow>
+            <DataFieldAutocomplete
+              value={formik.values.fn}
+              onChange={(value) => formik.setFieldValue("fn", value)}
+            />
             <InputRow>
               <Switch
                 checked={!!formik.values.groupedOptions}
@@ -198,7 +189,6 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
           <Options formik={formik} />
         </ErrorWrapper>
       </ModalSection>
-
       <ModalFooter formik={formik} />
     </form>
   );
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<Option>) => group.children)?.flat();
+  const initialOptionVals = initialOptions?.map((option) => option.data?.val);
 
   return (
     <ModalSectionContent subtitle="Options">
@@ -115,6 +121,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                       groups: formik.values.groupedOptions.map(
                         (opt: Group<Option>) => opt.title
                       ),
+                      schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
                     }}
                   />
                 </Box>
@@ -160,7 +167,10 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
             }) as Option
           }
           Editor={ChecklistOptionsEditor}
-          editorExtraProps={{ showValueField: !!formik.values.fn }}
+          editorExtraProps={{ 
+            showValueField: !!formik.values.fn,
+            schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
+          }}
         />
       )}
       {exclusiveOrOptionManagerShouldRender ? (
@@ -189,7 +199,10 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                 }) as Option
               }
               Editor={BaseOptionsEditor}
-              editorExtraProps={{ showValueField: !!formik.values.fn }}
+              editorExtraProps={{ 
+                showValueField: !!formik.values.fn,
+                schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
+             }}
             />
         </ErrorWrapper>
           </Box>
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
index bb4dfb6e41..4707475049 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
@@ -15,6 +15,7 @@ export type ChecklistOptionsEditorProps = BaseOptionsEditorProps & {
 
 const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
   value,
+  schema,
   onChange,
   showValueField = false,
   groups,
@@ -24,6 +25,7 @@ const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
   return (
     <BaseOptionsEditor
       value={value}
+      schema={schema}
       onChange={onChange}
       showValueField={showValueField}
     >
diff --git a/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx b/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
index c8bb017dcb..9e52e20a67 100644
--- a/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/ContactInput/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 { ContactInput, parseContactInput } from "./model";
 
@@ -27,6 +28,7 @@ export default function ContactInputComponent(props: Props): FCReturn {
     },
     validate: () => {},
   });
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -51,16 +53,11 @@ export default function ContactInputComponent(props: Props): FCReturn {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              required
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            required
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
         </ModalSectionContent>
       </ModalSection>
       <ModalFooter formik={formik} />
diff --git a/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx b/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
index b1e9bde74a..7b1f143fdb 100644
--- a/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
@@ -17,6 +17,7 @@ import DateInputUi from "ui/shared/DateInput/DateInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 
 export type Props = EditorProps<TYPES.DateInput, DateInput>;
@@ -57,16 +58,10 @@ const DateInputComponent: React.FC<Props> = (props) => {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              // required
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
           <Box mt={2}>
             <InputRow>
               <DateInputUi
diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
index cd84592001..4b36287e17 100644
--- a/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
@@ -1,3 +1,4 @@
+import { getValidSchemaValues } from "@opensystemslab/planx-core";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React from "react";
@@ -8,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";
 
 function Component(props: any) {
@@ -38,17 +40,25 @@ function Component(props: any) {
         props.handleSubmit({ type: TYPES.FileUpload, data: newValues });
       }
     },
-    validate: () => {},
+    validate: () => { },
   });
 
+  // Rather than default to generic `useStore().getFlowSchema()`
+  //   File Upload components can specifically suggest based on ODP Schema enum options
+  let schema = getValidSchemaValues("FileType") || [];
+  // // Additionally ensure that existing initial values are supported & pre-populated on load
+  if (formik.initialValues?.fn && !schema?.includes(formik.initialValues.fn)) 
+    schema.push(formik.initialValues.fn);
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
         <ModalSectionContent title="File upload" Icon={ICONS[TYPES.FileUpload]}>
           <InputRow>
             <Input
+              required
               format="large"
-              placeholder="File Upload"
+              placeholder="Title"
               name="title"
               value={formik.values.title}
               onChange={formik.handleChange}
@@ -62,16 +72,12 @@ function Component(props: any) {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              required
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            required
+            schema={schema}
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
         </ModalSectionContent>
       </ModalSection>
       <ModalFooter formik={formik} />
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx
index c6ba042045..df1c6f4bb8 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx
@@ -4,6 +4,7 @@ import Divider from "@mui/material/Divider";
 import MenuItem from "@mui/material/MenuItem";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import { getValidSchemaValues } from "@opensystemslab/planx-core";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
@@ -24,6 +25,7 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import { Switch } from "ui/shared/Switch";
 
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import {
   checkIfConditionalRule,
@@ -122,6 +124,13 @@ function FileUploadAndLabelComponent(props: Props) {
 function FileTypeEditor(props: ListManagerEditorProps<FileType>) {
   const isConditionalRule = checkIfConditionalRule(props.value.rule.condition);
 
+  // Rather than default to generic `useStore().getFlowSchema()`
+  //   File Upload components can specifically suggest based on ODP Schema enum options
+  let schema = getValidSchemaValues("FileType") || [];
+  // Additionally ensure that existing initial values are supported & pre-populated on load
+  if (props.value.fn && !schema?.includes(props.value.fn))
+    schema.push(props.value.fn);
+
   return (
     <Box sx={{ flex: 1 }} data-testid="rule-list-manager">
       <ModalSubtitle title="File" />
@@ -136,18 +145,14 @@ function FileTypeEditor(props: ListManagerEditorProps<FileType>) {
           placeholder="File type"
         />
       </InputRow>
-      <InputRow>
-        <Input
-          required
-          name="fn"
-          format="data"
-          value={props.value.fn}
-          onChange={(e) =>
-            props.onChange(merge(props.value, { fn: e.target.value }))
-          }
-          placeholder="Data field"
-        />
-      </InputRow>
+      <DataFieldAutocomplete
+        required
+        schema={schema}
+        value={props.value.fn}
+        onChange={(value) => 
+          props.onChange(merge(props.value, { fn: value }))
+        }
+      />
       <ModalSubtitle title="Rule" />
       <InputRow>
         <SelectInput
diff --git a/editor.planx.uk/src/@planx/components/List/Editor.tsx b/editor.planx.uk/src/@planx/components/List/Editor.tsx
index 339c08ca9c..490cea7477 100644
--- a/editor.planx.uk/src/@planx/components/List/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Editor.tsx
@@ -13,6 +13,7 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { EditorProps } from "../shared/types";
 import { List, parseContent, validationSchema } from "./model";
@@ -114,16 +115,11 @@ function ListComponent(props: Props) {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-              required
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            required
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
           <ErrorWrapper error={formik.errors.schema?.max}>
             <InputRow>
               <InputRowLabel>Schema</InputRowLabel>
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
index 4c8643b78f..dde20fafb2 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
@@ -17,6 +17,7 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import BasicRadio from "../shared/Radio/BasicRadio";
 import { EditorProps } from "../shared/types";
@@ -66,16 +67,11 @@ function MapAndLabelComponent(props: Props) {
                 onChange={formik.handleChange}
               />
             </InputRow>
-            <InputRow>
-              <Input
-                format="data"
-                name="fn"
-                placeholder={"Data Field"}
-                value={formik.values.fn}
-                onChange={formik.handleChange}
-                required
-              />
-            </InputRow>
+            <DataFieldAutocomplete
+              required
+              value={formik.values.fn}
+              onChange={(value) => formik.setFieldValue("fn", value)}
+            />
           </InputGroup>
         </ModalSectionContent>
         <ModalSectionContent title="Map options">
diff --git a/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx b/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
index 40111fadc6..29bb7d4707 100644
--- a/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
@@ -14,6 +14,7 @@ import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 import { Switch } from "ui/shared/Switch";
 
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 
 export type Props = EditorProps<TYPES.NumberInput, NumberInput>;
@@ -28,6 +29,7 @@ export default function NumberInputComponent(props: Props): FCReturn {
     },
     validate: () => {},
   });
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -52,16 +54,10 @@ export default function NumberInputComponent(props: Props): FCReturn {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              // required
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
           <InputRow>
             <InputRowLabel>units</InputRowLabel>
             <InputRowItem>
diff --git a/editor.planx.uk/src/@planx/components/Page/Editor.tsx b/editor.planx.uk/src/@planx/components/Page/Editor.tsx
index 282e9087da..f466f2697c 100644
--- a/editor.planx.uk/src/@planx/components/Page/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Page/Editor.tsx
@@ -12,6 +12,7 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { EditorProps } from "../shared/types";
 import { Page, parsePage } from "./model";
@@ -56,16 +57,11 @@ function PageComponent(props: Props) {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-              required
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            required
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
           <InputRow>
             <InputRowLabel>Schema</InputRowLabel>
             <InputRowItem>
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index bf61ce94ed..ecb4864689 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -12,10 +12,13 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
 
+import { useStore } from "pages/FlowEditor/lib/store";
 import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
 import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
+import { getOptionsSchemaByFn } from "../shared/utils";
 import QuestionOptionsEditor from "./OptionsEditor";
 
 interface Props {
@@ -71,6 +74,9 @@ export const Question: React.FC<Props> = (props) => {
     },
   });
 
+  const schema = useStore().getFlowSchema();
+  const initialOptionVals = formik.initialValues.options?.map((option) => option.data?.val);
+
   const focusRef = useRef<HTMLInputElement | null>(null);
 
   // horrible hack to remove focus from Rich Text Editor
@@ -110,18 +116,11 @@ export const Question: React.FC<Props> = (props) => {
                 onChange={formik.handleChange}
               />
             </InputRow>
-            <InputRow>
-              <Input
-                // required
-                format="data"
-                name="fn"
-                value={formik.values.fn}
-                placeholder="Data Field"
-                onChange={formik.handleChange}
-                error={Boolean(formik.errors?.fn)}
-                errorMessage={formik.errors?.fn}
-              />
-            </InputRow>
+            <DataFieldAutocomplete
+              schema={schema?.nodes}
+              value={formik.values.fn}
+              onChange={(value) => formik.setFieldValue("fn", value)}
+            />
             <InputRow>
               <Switch
                 checked={formik.values.neverAutoAnswer}
@@ -152,7 +151,10 @@ export const Question: React.FC<Props> = (props) => {
               }) as Option
             }
             Editor={QuestionOptionsEditor}
-            editorExtraProps={{ showValueField: !!formik.values.fn }}
+            editorExtraProps={{ 
+              showValueField: !!formik.values.fn, 
+              schema: getOptionsSchemaByFn(formik.values.fn, schema?.options, initialOptionVals),
+            }}
           />
         </ModalSectionContent>
       </ModalSection>
diff --git a/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
index d9e0c4792b..0b314fbefe 100644
--- a/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
@@ -7,12 +7,14 @@ import {
 
 const QuestionOptionsEditor: React.FC<BaseOptionsEditorProps> = ({
   value,
+  schema,
   onChange,
   showValueField = false,
 }) => {
   return (
     <BaseOptionsEditor
       value={value}
+      schema={schema}
       onChange={onChange}
       showValueField={showValueField}
       showDescriptionField={true}
diff --git a/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx b/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
index 6bf65d51ca..b1ebc9de72 100644
--- a/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
@@ -12,6 +12,7 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { parseSetValue, SetValue } from "./model";
 
 type Props = EditorProps<TYPES.SetValue, SetValue>;
@@ -96,16 +97,11 @@ function SetValueComponent(props: Props) {
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
         <ModalSectionContent title="Passport field name">
-          <InputRow>
-            <Input
-              required
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="key"
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            required
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
         </ModalSectionContent>
         {formik.values.operation !== "removeAll" && (
           <ModalSectionContent title="Field value">
diff --git a/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx b/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
index 054c71f287..0d38f161d9 100644
--- a/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
@@ -12,6 +12,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 { parseTextInput, TextInput } from "./model";
 
@@ -28,7 +29,7 @@ const TextInputComponent: React.FC<Props> = (props) => {
         });
       }
     },
-    validate: () => {},
+    validate: () => { },
   });
 
   const handleRadioChange = (event: React.SyntheticEvent<Element, Event>) => {
@@ -57,16 +58,10 @@ const TextInputComponent: React.FC<Props> = (props) => {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <InputRow>
-            <Input
-              // required
-              format="data"
-              name="fn"
-              value={formik.values.fn}
-              placeholder="Data Field"
-              onChange={formik.handleChange}
-            />
-          </InputRow>
+          <DataFieldAutocomplete
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
         </ModalSectionContent>
         <ModalSectionContent title="Input style">
           <FormControl component="fieldset">
diff --git a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
index 702c843868..d938c9002c 100644
--- a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
@@ -6,9 +6,11 @@ import InputRowItem from "ui/shared/InputRowItem";
 
 import { Option } from ".";
 import { FlagsSelect } from "./FlagsSelect";
+import { DataFieldAutocomplete } from "./DataFieldAutocomplete";
 
 export interface BaseOptionsEditorProps {
   value: Option;
+  schema?: string[];
   showValueField?: boolean;
   showDescriptionField?: boolean;
   onChange: (newVal: Option) => void;
@@ -72,22 +74,19 @@ export const BaseOptionsEditor: React.FC<BaseOptionsEditorProps> = (props) => (
       </InputRow>
     )}
     {props.showValueField && (
-      <InputRow>
-        <Input
-          format="data"
-          value={props.value.data.val || ""}
-          placeholder="Data Value"
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                val: ev.target.value,
-              },
-            });
-          }}
-        />
-      </InputRow>
+      <DataFieldAutocomplete
+        schema={props.schema}
+        value={props.value.data.val || ""}
+        onChange={(targetValue) => {
+          props.onChange({
+            ...props.value,
+            data: {
+              ...props.value.data,
+              val: targetValue ? targetValue : undefined,
+            },
+          });
+        }}
+      />
     )}
     <FlagsSelect
       value={
diff --git a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
new file mode 100644
index 0000000000..ff7d2a21b0
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -0,0 +1,101 @@
+import {
+  AutocompleteChangeReason,
+  AutocompleteProps,
+  createFilterOptions
+} from "@mui/material/Autocomplete";
+import ListItem from "@mui/material/ListItem";
+import isNull from "lodash/isNull";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { useMemo } from "react";
+import AutocompleteInput from "ui/shared/AutocompleteInput";
+import InputRow from "ui/shared/InputRow";
+
+interface Props {
+  schema?: string[];
+  value?: string;
+  onChange: (value: string | null) => void;
+  required?: boolean;
+}
+
+const renderOptions: AutocompleteProps<
+  string,
+  false,
+  false,
+  true,
+  "div"
+>["renderOption"] = (props, option) => {
+  return (
+    <ListItem key={option} sx={{ fontFamily: (theme) => theme.typography.data.fontFamily }} {...props}>
+      {option}
+    </ListItem>
+  );
+};
+
+const filter = createFilterOptions<string>();
+
+export const DataFieldAutocomplete: React.FC<Props> = (props) => {
+  const defaultSchema = useStore().getFlowSchema()?.nodes || [];
+  const { value: initialValue, schema: options = defaultSchema } = props;
+
+  const value: string | undefined = useMemo(
+    () => options?.find((option) => option === initialValue),
+    [initialValue, options],
+  );
+
+  const handleChange = (
+    _event: React.SyntheticEvent,
+    value: string | null,
+    _reason: AutocompleteChangeReason,
+  ) => {
+    if (typeof value === "string") {
+      // Adding a new option
+      if (value.startsWith('Add "')) {
+        props.onChange(value.split(('"'))[1]);
+      } else {
+        // Selecting an option
+        props.onChange(value);
+      }
+    } else if (isNull(value)) {
+      // Clearing an option
+      props.onChange(value);
+    }
+  };
+
+  return (
+    <InputRow>
+      <AutocompleteInput
+        id="data-field-autocomplete"
+        key="data-field-autocomplete"
+        placeholder="Data field"
+        required={Boolean(props.required)}
+        onChange={handleChange}
+        value={value}
+        options={options}
+        filterOptions={(options, params) => {
+          const filtered = filter(options, params);
+          const { inputValue } = params;
+          // Suggest the creation of a new value
+          const isExisting = options.some((option) => inputValue === option);
+          if (inputValue !== "" && !isExisting) {
+            filtered.push(`Add "${inputValue}"`);
+          }
+          return filtered;
+        }}
+        getOptionLabel={(option) => {
+          let formattedOption = option;
+          // If a new option was added, strip out the value between ""
+          if (option.startsWith('Add "')) {
+            formattedOption = option.split('"')[1];
+          }
+          return formattedOption;
+        }}
+        renderOption={renderOptions}
+        freeSolo
+        selectOnFocus
+        clearOnEscape
+        handleHomeEndKeys
+        autoHighlight
+      />
+    </InputRow>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/shared/utils.ts b/editor.planx.uk/src/@planx/components/shared/utils.ts
index d6d4b0ff10..9356a3733d 100644
--- a/editor.planx.uk/src/@planx/components/shared/utils.ts
+++ b/editor.planx.uk/src/@planx/components/shared/utils.ts
@@ -1,3 +1,4 @@
+import { getValidSchemaValues } from "@opensystemslab/planx-core";
 import isNil from "lodash/isNil";
 
 export const validateEmail = (email: string) => {
@@ -63,3 +64,21 @@ export const getPreviouslySubmittedData = ({
 
   return data;
 };
+
+export const getOptionsSchemaByFn = (fn?: string, defaultOptionsSchema?: string[], initialOptions?: (string | undefined)[]) => {
+    let schema = defaultOptionsSchema;
+
+    // For certain data fields, suggest based on full ODP Schema enums rather than current flow schema
+    if (fn === "application.type") schema = getValidSchemaValues("ApplicationType");
+    if (fn === "proposal.projectType") schema = getValidSchemaValues("ProjectType");
+    if (fn === "property.type") schema = getValidSchemaValues("PropertyType");
+
+    // Ensure that any initial values outside of ODP Schema enums will still be recognised/pre-populated when modal loads
+    initialOptions?.forEach((option) => {
+      if (option && !schema?.includes(option)) {
+        schema?.push(option);
+      }
+    });
+
+    return schema;
+  }
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/getFlowSchema.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/getFlowSchema.test.ts
new file mode 100644
index 0000000000..5124d35441
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/getFlowSchema.test.ts
@@ -0,0 +1,255 @@
+import { Store, useStore } from "../store";
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+
+const { getState, setState } = useStore;
+const { getFlowSchema } = getState();
+
+describe("generating the schema for a flow", () => {
+  test("a unique ordered set of all component type data fields (fn) are returned as schema.nodes", () => {
+    setState({ flow });
+    expect(getFlowSchema()?.nodes).toEqual([
+      "property.type",
+      "proposal.projectType",
+      "proposal.startDate",
+    ]);
+  });
+
+  test("a unique ordered set of all answer type data values (val) are returned as schema.options", () => {
+    setState({ flow });
+    expect(getFlowSchema()?.options).toEqual([
+      "alter",
+      "changeOfUse",
+      "demolish",
+      "extend",
+      "internal",
+      "new",
+      "other",
+      "residential",
+      "residential.HMO",
+      "residential.dwelling.flat",
+      "residential.dwelling.house",
+      "unit",
+    ]);
+  });
+
+  test("filters and their flag values are omitted from the schema", () => {
+    setState({ flow: flowWithFilter });
+    expect(getFlowSchema()).toEqual({ nodes: [], options: [] });
+  });
+
+  test("an empty flow returns an empty schema", () => {
+    setState({ flow: {} });
+    expect(getFlowSchema()).toEqual({ nodes: [], options: [] });
+  });
+});
+
+const flow: Store.Flow = {
+  "_root": {
+    "edges": [
+      "PropertyQuestion",
+      "ProjectQuestion",
+      "DateInput"
+    ]
+  },
+  "0mUjzeoySp": {
+    "data": {
+      "val": "residential.dwelling.flat",
+      "text": "Flat"
+    },
+    "type": TYPES.Answer
+  },
+  "ProjectQuestion": {
+    "data": {
+      "fn": "proposal.projectType",
+      "text": "Do you have any supported project?"
+    },
+    "type": TYPES.Question,
+    "edges": [
+      "TtjHD8V5Z9",
+      "FPHuxFvNmb",
+      "lOtvc52uBR",
+      "ZI4h6FLszP",
+      "X1YhLhqImI",
+      "hWyONP37gE",
+      "7TBRnmE54E",
+      "NWR7GMCibW"
+    ]
+  },
+  "7TBRnmE54E": {
+    "data": {
+      "val": "unit",
+      "text": "Unit conversion"
+    },
+    "type": TYPES.Answer
+  },
+  "GranularPropertyQuestion": {
+    "data": {
+      "fn": "property.type",
+      "text": "What type of property is it?"
+    },
+    "type": TYPES.Question,
+    "edges": [
+      "vNV3AeoySp",
+      "0mUjzeoySp",
+      "r3dAheoySp"
+    ]
+  },
+  "FPHuxFvNmb": {
+    "data": {
+      "val": "alter",
+      "text": "Alteration"
+    },
+    "type": TYPES.Answer
+  },
+  "NWR7GMCibW": {
+    "data": {
+      "val": "other",
+      "text": "No"
+    },
+    "type": TYPES.Answer
+  },
+  "PropertyQuestion": {
+    "data": {
+      "fn": "property.type",
+      "text": "What type of property is it?",
+      "neverAutoAnswer": false,
+      "tags": []
+    },
+    "type": TYPES.Question,
+    "edges": [
+      "n14BneoySp",
+      "ZptuQeoySp"
+    ]
+  },
+  "TtjHD8V5Z9": {
+    "data": {
+      "val": "extend",
+      "text": "Extension"
+    },
+    "type": TYPES.Answer
+  },
+  "X1YhLhqImI": {
+    "data": {
+      "val": "new",
+      "text": "New build"
+    },
+    "type": TYPES.Answer
+  },
+  "ZI4h6FLszP": {
+    "data": {
+      "val": "changeOfUse",
+      "text": "Change of Use"
+    },
+    "type": TYPES.Answer
+  },
+  "ZptuQeoySp": {
+    "data": {
+      "text": "Something else",
+      "val": "other"
+    },
+    "type": TYPES.Answer
+  },
+  "hWyONP37gE": {
+    "data": {
+      "val": "demolish",
+      "text": "Demolition"
+    },
+    "type": TYPES.Answer
+  },
+  "lOtvc52uBR": {
+    "data": {
+      "val": "internal",
+      "text": "Internal"
+    },
+    "type": TYPES.Answer
+  },
+  "n14BneoySp": {
+    "data": {
+      "val": "residential",
+      "text": "Residential"
+    },
+    "type": TYPES.Answer,
+    "edges": [
+      "GranularPropertyQuestion"
+    ]
+  },
+  "r3dAheoySp": {
+    "data": {
+      "val": "residential.HMO",
+      "text": "HMO"
+    },
+    "type": TYPES.Answer
+  },
+  "vNV3AeoySp": {
+    "data": {
+      "val": "residential.dwelling.house",
+      "text": "House"
+    },
+    "type": TYPES.Answer
+  },
+  "DateInput": {
+    "type": TYPES.DateInput,
+    "data": {
+      "title": "When will the works begin?",
+      "fn": "proposal.startDate",
+      "min": "2024-01-01",
+      "max": "2050-01-01"
+    }
+  }
+};
+
+const flowWithFilter: Store.Flow = {
+  "_root": {
+    "edges": [
+      "Filter"
+    ]
+  },
+  "96L5yOhBQJ": {
+    "data": {
+      "val": "TR-DE_MINIMIS",
+      "text": "De minimis"
+    },
+    "type": TYPES.Answer
+  },
+  "G404TmcPne": {
+    "data": {
+      "val": "TR-MISSING_INFO",
+      "text": "Missing information"
+    },
+    "type": TYPES.Answer
+  },
+  "Filter": {
+    "data": {
+      "fn": "flag",
+      "category": "Works to trees & hedges"
+    },
+    "type": TYPES.Filter,
+    "edges": [
+      "G404TmcPne",
+      "UXbWvxQMPF",
+      "96L5yOhBQJ",
+      "W3ovRimuF3",
+      "xkiC61BIiG"
+    ]
+  },
+  "UXbWvxQMPF": {
+    "data": {
+      "val": "TR-REQUIRED",
+      "text": "Required"
+    },
+    "type": TYPES.Answer
+  },
+  "W3ovRimuF3": {
+    "data": {
+      "val": "TR-NOT_REQUIRED",
+      "text": "Not required"
+    },
+    "type": TYPES.Answer
+  },
+  "xkiC61BIiG": {
+    "data": {
+      "text": "No flag result"
+    },
+    "type": TYPES.Answer
+  }
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index 6c517e6ce0..9b662be5d7 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -1,10 +1,11 @@
 import { gql } from "@apollo/client";
 import { getPathForNode, sortFlow } from "@opensystemslab/planx-core";
 import {
-  ComponentType,
+  ComponentType as TYPES,
   FlowGraph,
   NodeId,
   OrderedFlow,
+  flatFlags,
 } from "@opensystemslab/planx-core/types";
 import {
   add,
@@ -188,6 +189,7 @@ export interface EditorStore extends Store.Store {
     href: string;
   }) => void;
   getURLForNode: (nodeId: string) => string;
+  getFlowSchema: () => { nodes?: string[], options?: string[] } | undefined;
 }
 
 export const editorStore: StateCreator<
@@ -577,7 +579,7 @@ export const editorStore: StateCreator<
 
     const path = getPathForNode({ nodeId, flow });
     const internalPortals = path.filter(
-      ({ type }) => type === ComponentType.InternalPortal,
+      ({ type }) => type === TYPES.InternalPortal,
     );
     const [node, parent, grandparent] = path;
 
@@ -594,11 +596,41 @@ export const editorStore: StateCreator<
 
     // Determine node path based on the node type
     const nodePath =
-      node.type === ComponentType.Answer
+      node.type === TYPES.Answer
         ? `nodes/${grandparent.id}/nodes/${parent.id}/edit`
         : `nodes/${parent.id}/nodes/${node.id}/edit`;
 
     const urlPath = `/${teamSlug}/${flowSlug}${portalPath}/${nodePath}`;
     return urlPath;
   },
+
+  getFlowSchema: () => {
+    const { flow } = get();
+    if (!flow) return;
+
+    const nodes: Set<string> = new Set();
+    const options: Set<string> = new Set();
+
+    Object.entries(flow).map(([_id, node]) => {
+      if (node.data?.fn) {
+        // Exclude Filter fn value as not exposed to editors
+        if (node.data?.fn !== "flag") nodes.add(node.data.fn)
+      };
+  
+      // TODO align to (reuse?) data facets from search
+      if (node.data?.output) nodes.add(node.data.output);
+      if (node.data?.dataFieldBoundary) nodes.add(node.data.dataFieldBoundary);
+
+      if (node.data?.val) {
+        // Exclude Filter Option flag values as not exposed to editors
+        const flagVals = flatFlags.map((flag) => flag.value);
+        if (!flagVals.includes(node.data.val)) options.add(node.data.val)
+      };
+    });
+
+    return {
+      nodes: Array.from(nodes).sort(),
+      options: Array.from(options).sort(),
+    };
+  },
 });
diff --git a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
new file mode 100644
index 0000000000..831b689663
--- /dev/null
+++ b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
@@ -0,0 +1,122 @@
+import Autocomplete, {
+  autocompleteClasses,
+  AutocompleteProps,
+} from "@mui/material/Autocomplete";
+import FormControl from "@mui/material/FormControl";
+import { inputLabelClasses } from "@mui/material/InputLabel";
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+import { styled } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
+import React from "react";
+import { borderedFocusStyle } from "theme";
+
+type RequiredAutocompleteProps<T> = Pick<
+  AutocompleteProps<T, false, false, true, "div">,
+  "options" | "onChange"
+>;
+
+type OptionalAutocompleteProps<T> = Partial<
+  AutocompleteProps<T, false, false, true, "div">
+>;
+
+type WithLabel<T> = {
+  label: string;
+  placeholder?: never;
+  required: boolean;
+} & RequiredAutocompleteProps<T> &
+  OptionalAutocompleteProps<T>;
+
+type WithPlaceholder<T> = {
+  label?: never;
+  placeholder: string;
+  required: boolean;
+} & RequiredAutocompleteProps<T> &
+  OptionalAutocompleteProps<T>;
+
+type Props<T> = WithLabel<T> | WithPlaceholder<T>;
+
+const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
+  "& > div > label": {
+    paddingRight: theme.spacing(3),
+  },
+  [`& .${autocompleteClasses.endAdornment}`]: {
+    top: "unset",
+  },
+  "&:focus-within": {
+    "& svg": {
+      color: "black",
+    },
+  },
+})) as typeof Autocomplete;
+
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  "&:focus-within": {
+    ...borderedFocusStyle,
+    [`& .${outlinedInputClasses.notchedOutline}`]: {
+      border: "1px solid transparent !important",
+    },
+  },
+  [`& .${outlinedInputClasses.notchedOutline}`]: {
+    borderRadius: 0,
+    border: `1px solid${theme.palette.border.main} !important`,
+  },
+  "& fieldset": {
+    borderColor: theme.palette.border.main,
+  },
+  backgroundColor: theme.palette.background.paper,
+  [`& .${outlinedInputClasses.root}, input`]: {
+    cursor: "pointer",
+    // TODO extract as `format="data"` prop more like `Input` ? 
+    backgroundColor: "#f0f0f0",
+    fontFamily: theme.typography.data.fontFamily,
+  },
+  [`& .${inputLabelClasses.root}`]: {
+    textDecoration: "underline",
+    color: theme.palette.primary.main,
+    "&[data-shrink=true]": {
+      textDecoration: "none",
+      color: theme.palette.text.primary,
+      paddingY: 0,
+      transform: "translate(0px, -22px) scale(0.85)",
+    },
+  },
+}));
+
+export default function AutocompleteInput<T>(props: Props<T>) {
+  const isSelectEmpty = !props.value;
+  const placeholder = isSelectEmpty ? props.placeholder : undefined;
+
+  return (
+    <FormControl sx={{ display: "flex", flexDirection: "column" }}>
+      <StyledAutocomplete<T, false, false, true, "div">
+        role="status"
+        aria-atomic={true}
+        aria-live="polite"
+        forcePopupIcon={false}
+        renderInput={(params) => (
+          <StyledTextField
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              notched: false,
+            }}
+            label={props.label}
+            placeholder={placeholder}
+            required={props.required}
+          />
+        )}
+        componentsProps={{
+          popupIndicator: {
+            disableRipple: true,
+          },
+          popper: {
+            sx: {
+              boxShadow: 10,
+            },
+          },
+        }}
+        {...props}
+      />
+    </FormControl>
+  );
+}