From 48d60cead4d154265990c2aa53aef65cbe60b83b Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 10 Dec 2024 15:24:41 +0100
Subject: [PATCH 01/18] wip

---
 .../@planx/components/FileUpload/Editor.tsx   |  21 ++-
 .../shared/DataFieldAutocomplete.tsx          |  56 ++++++++
 .../src/pages/FlowEditor/lib/store/editor.ts  |  30 ++++-
 .../src/ui/shared/AutocompleteInput.tsx       | 121 ++++++++++++++++++
 4 files changed, 213 insertions(+), 15 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
 create mode 100644 editor.planx.uk/src/ui/shared/AutocompleteInput.tsx

diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
index cd84592001..49163aa9f0 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";
@@ -9,6 +10,7 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
 import { ICONS } from "../shared/icons";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 
 function Component(props: any) {
   const formik = useFormik<{
@@ -38,9 +40,13 @@ function Component(props: any) {
         props.handleSubmit({ type: TYPES.FileUpload, data: newValues });
       }
     },
-    validate: () => {},
+    validate: () => { },
   });
 
+  // Rather than default to generic `useStore().geFlowSchema()`
+  //   File Upload components can specificly reference ODP Schema enum options
+  const schema = getValidSchemaValues("FileType");
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -48,7 +54,7 @@ function Component(props: any) {
           <InputRow>
             <Input
               format="large"
-              placeholder="File Upload"
+              placeholder="Title"
               name="title"
               value={formik.values.title}
               onChange={formik.handleChange}
@@ -62,16 +68,7 @@ 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 schema={schema} value={formik.values.fn} onChange={formik.handleChange} /> 
         </ModalSectionContent>
       </ModalSection>
       <ModalFooter formik={formik} />
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..4f6119e0ae
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -0,0 +1,56 @@
+import {
+  AutocompleteChangeReason,
+  AutocompleteProps,
+  createFilterOptions,
+} from "@mui/material/Autocomplete";
+import ListItem from "@mui/material/ListItem";
+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) => void;
+}
+
+const filter = createFilterOptions<string>();
+
+export const DataFieldAutocomplete: React.FC<Props> = (props) => {
+  const { value: initialValue, schema: options } = props;
+
+  const value: string | undefined = useMemo(() => options?.find((option) => option === initialValue), [initialValue]);
+
+  const handleChange = (
+    _event: React.SyntheticEvent,
+    value: string,
+    _reason: AutocompleteChangeReason,
+  ) => {
+    props.onChange(value);
+  };
+
+  return (
+    <InputRow>
+      <AutocompleteInput
+        id="data-field-autocomplete"
+        key="data-field-autocomplete"
+        placeholder="Data field"
+        options={options}
+        getOptionLabel={(option: string) => option}
+        onChange={handleChange}
+        isOptionEqualToValue={(option: string, value: string) => option === value}
+        value={value}
+        filterOptions={(options: string[], params: any) => {
+          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;
+        }}
+      />
+    </InputRow>
+  );
+};
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..ca84ac2581 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -1,7 +1,7 @@
 import { gql } from "@apollo/client";
 import { getPathForNode, sortFlow } from "@opensystemslab/planx-core";
 import {
-  ComponentType,
+  ComponentType as TYPES,
   FlowGraph,
   NodeId,
   OrderedFlow,
@@ -188,6 +188,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 +578,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 +595,34 @@ 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]) => {
+      // TODO align to (reuse?) data facets from search
+      if (node.data?.fn) nodes.add(node.data.fn);
+      if (node.data?.output) nodes.add(node.data.output);
+      if (node.data?.dataFieldBoundary) nodes.add(node.data.dataFieldBoundary);
+
+      // TODO filter out flag values
+      if (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..eabd107280
--- /dev/null
+++ b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
@@ -0,0 +1,121 @@
+import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
+import Autocomplete, { autocompleteClasses, AutocompleteProps, createFilterOptions } 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";
+
+const PopupIcon = (
+  <ArrowIcon
+    sx={(theme) => ({ color: theme.palette.primary.main })}
+    fontSize="large"
+  />
+);
+
+// T = value = string, multiple=false, disableClearable=true, freeSolo=true, chip="div"
+type RequiredAutocompleteProps<T> = Pick<
+  AutocompleteProps<T, false, true, true, "div">,
+  "options" | "onChange"
+>;
+
+type WithLabel<T> = {
+  label: string;
+  placeholder?: never;
+} & RequiredAutocompleteProps<T>;
+
+type WithPlaceholder<T> = {
+  label?: never;
+  placeholder: string;
+} & RequiredAutocompleteProps<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",
+    backgroundColor: theme.palette.background.default,
+  },
+  [`& .${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, true, true, "div">
+        sx={{ width: 300 }}
+        role="status"
+        aria-atomic={true}
+        aria-live="polite"
+        disableClearable
+        freeSolo
+        popupIcon={PopupIcon}
+        renderInput={(params) => (
+          <StyledTextField
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              notched: false,
+            }}
+            label={props.label}
+            placeholder={props.placeholder}
+          />
+        )}
+        componentsProps={{
+          popupIndicator: {
+            disableRipple: true,
+          },
+          popper: {
+            sx: {
+              boxShadow: 10,
+            },
+          },
+        }}
+        {...props}
+      />
+    </FormControl>
+  );
+}

From d0e707ec9ff95f30533aa9d6e096860aa121c437 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 10 Dec 2024 15:26:20 +0000
Subject: [PATCH 02/18] fix: Autocomplete types

---
 .../shared/DataFieldAutocomplete.tsx           | 16 ++++++++++------
 .../src/ui/shared/AutocompleteInput.tsx        | 18 +++++++++++++-----
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
index 4f6119e0ae..57b9d37357 100644
--- a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -17,9 +17,12 @@ interface Props {
 const filter = createFilterOptions<string>();
 
 export const DataFieldAutocomplete: React.FC<Props> = (props) => {
-  const { value: initialValue, schema: options } = props;
+  const { value: initialValue, schema: options = [] } = props;
 
-  const value: string | undefined = useMemo(() => options?.find((option) => option === initialValue), [initialValue]);
+  const value: string | undefined = useMemo(
+    () => options?.find((option) => option === initialValue),
+    [initialValue, options],
+  );
 
   const handleChange = (
     _event: React.SyntheticEvent,
@@ -36,16 +39,17 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
         key="data-field-autocomplete"
         placeholder="Data field"
         options={options}
-        getOptionLabel={(option: string) => option}
         onChange={handleChange}
-        isOptionEqualToValue={(option: string, value: string) => option === value}
+        isOptionEqualToValue={(option: string, value: string) =>
+          option === value
+        }
         value={value}
-        filterOptions={(options: string[], params: any) => {
+        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) {
+          if (inputValue !== "" && !isExisting) {
             filtered.push(`Add "${inputValue}"`);
           }
           return filtered;
diff --git a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
index eabd107280..6c6602c70b 100644
--- a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
+++ b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
@@ -1,5 +1,9 @@
 import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
-import Autocomplete, { autocompleteClasses, AutocompleteProps, createFilterOptions } from '@mui/material/Autocomplete';
+import Autocomplete, {
+  autocompleteClasses,
+  AutocompleteProps,
+  createFilterOptions,
+} from "@mui/material/Autocomplete";
 import FormControl from "@mui/material/FormControl";
 import { inputLabelClasses } from "@mui/material/InputLabel";
 import { outlinedInputClasses } from "@mui/material/OutlinedInput";
@@ -21,15 +25,21 @@ type RequiredAutocompleteProps<T> = Pick<
   "options" | "onChange"
 >;
 
+type OptionalAutocompleteProps<T> = Partial<
+  AutocompleteProps<T, false, true, true, "div">
+>;
+
 type WithLabel<T> = {
   label: string;
   placeholder?: never;
-} & RequiredAutocompleteProps<T>;
+} & RequiredAutocompleteProps<T> &
+  OptionalAutocompleteProps<T>;
 
 type WithPlaceholder<T> = {
   label?: never;
   placeholder: string;
-} & RequiredAutocompleteProps<T>;
+} & RequiredAutocompleteProps<T> &
+  OptionalAutocompleteProps<T>;
 
 type Props<T> = WithLabel<T> | WithPlaceholder<T>;
 
@@ -78,7 +88,6 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   },
 }));
 
-
 export default function AutocompleteInput<T>(props: Props<T>) {
   const isSelectEmpty = !props.value;
   const placeholder = isSelectEmpty ? props.placeholder : undefined;
@@ -91,7 +100,6 @@ export default function AutocompleteInput<T>(props: Props<T>) {
         aria-atomic={true}
         aria-live="polite"
         disableClearable
-        freeSolo
         popupIcon={PopupIcon}
         renderInput={(params) => (
           <StyledTextField

From 76676e58d31ac1e962294601d51717bf7bef7e25 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 11 Dec 2024 21:57:36 +0100
Subject: [PATCH 03/18] styled and mostly working x3 component types

---
 .../@planx/components/FileUpload/Editor.tsx   | 14 +++++---
 .../@planx/components/NumberInput/Editor.tsx  | 20 +++++------
 .../src/@planx/components/Question/Editor.tsx | 35 ++++++++++++-------
 .../shared/DataFieldAutocomplete.tsx          | 24 +++++++++++--
 .../src/ui/shared/AutocompleteInput.tsx       | 19 +++++-----
 5 files changed, 74 insertions(+), 38 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
index 49163aa9f0..25ddd29b2c 100644
--- a/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
@@ -9,8 +9,8 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
-import { ICONS } from "../shared/icons";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
+import { ICONS } from "../shared/icons";
 
 function Component(props: any) {
   const formik = useFormik<{
@@ -43,8 +43,8 @@ function Component(props: any) {
     validate: () => { },
   });
 
-  // Rather than default to generic `useStore().geFlowSchema()`
-  //   File Upload components can specificly reference ODP Schema enum options
+  // Rather than default to generic `useStore().getFlowSchema()`
+  //   File Upload components can specifically reference ODP Schema enum options
   const schema = getValidSchemaValues("FileType");
 
   return (
@@ -53,6 +53,7 @@ function Component(props: any) {
         <ModalSectionContent title="File upload" Icon={ICONS[TYPES.FileUpload]}>
           <InputRow>
             <Input
+              required
               format="large"
               placeholder="Title"
               name="title"
@@ -68,7 +69,12 @@ function Component(props: any) {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <DataFieldAutocomplete schema={schema} value={formik.values.fn} onChange={formik.handleChange} /> 
+          <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/NumberInput/Editor.tsx b/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
index 40111fadc6..6fd9a02242 100644
--- a/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
@@ -14,6 +14,8 @@ import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 import { Switch } from "ui/shared/Switch";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 
 export type Props = EditorProps<TYPES.NumberInput, NumberInput>;
@@ -28,6 +30,9 @@ export default function NumberInputComponent(props: Props): FCReturn {
     },
     validate: () => {},
   });
+
+  const schema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -52,16 +57,11 @@ 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
+            schema={schema}
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
           <InputRow>
             <InputRowLabel>units</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 e60f851311..9778b442e4 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -13,9 +13,11 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 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 { FlagsSelect } from "../shared/FlagsSelect";
 import { ICONS } from "../shared/icons";
 
@@ -38,6 +40,7 @@ const OptionEditor: React.FC<{
   value: Option;
   onChange: (newVal: Option) => void;
   showValueField?: boolean;
+  schema?: string[];
 }> = (props) => (
   <div style={{ width: "100%" }}>
     <InputRow>
@@ -108,6 +111,19 @@ const OptionEditor: React.FC<{
           }}
         />
       </InputRow>
+      // <DataFieldAutocomplete
+      //   schema={props.schema}
+      //   value={props.value.data.val || ""}
+      //   onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
+      //     props.onChange({
+      //       ...props.value,
+      //       data: {
+      //         ...props.value.data,
+      //         val: ev.target.value,
+      //       },
+      //     });
+      //   }}
+      // />
     )}
     <FlagsSelect
       value={
@@ -166,6 +182,8 @@ export const Question: React.FC<Props> = (props) => {
     },
   });
 
+  const schema = useStore().getFlowSchema();
+
   const focusRef = useRef<HTMLInputElement | null>(null);
 
   // horrible hack to remove focus from Rich Text Editor
@@ -205,18 +223,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}
diff --git a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
index 57b9d37357..71ca50e92c 100644
--- a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -1,7 +1,7 @@
 import {
   AutocompleteChangeReason,
   AutocompleteProps,
-  createFilterOptions,
+  createFilterOptions
 } from "@mui/material/Autocomplete";
 import ListItem from "@mui/material/ListItem";
 import React, { useMemo } from "react";
@@ -11,9 +11,22 @@ import InputRow from "ui/shared/InputRow";
 interface Props {
   schema?: string[];
   value?: string;
-  onChange: (value: string) => void;
+  onChange: (value: string | null) => void;
+  required?: boolean;
 }
 
+const renderOptions: AutocompleteProps<
+  string,
+  false,
+  false,
+  true,
+  "div"
+>["renderOption"] = (props, value) => (
+  <ListItem key={value} sx={{ fontFamily: (theme) => theme.typography.data.fontFamily }} {...props}>
+    {value}
+  </ListItem>
+);
+
 const filter = createFilterOptions<string>();
 
 export const DataFieldAutocomplete: React.FC<Props> = (props) => {
@@ -26,7 +39,7 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
 
   const handleChange = (
     _event: React.SyntheticEvent,
-    value: string,
+    value: string | null,
     _reason: AutocompleteChangeReason,
   ) => {
     props.onChange(value);
@@ -38,6 +51,7 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
         id="data-field-autocomplete"
         key="data-field-autocomplete"
         placeholder="Data field"
+        required={Boolean(props.required)}
         options={options}
         onChange={handleChange}
         isOptionEqualToValue={(option: string, value: string) =>
@@ -54,6 +68,10 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
           }
           return filtered;
         }}
+        renderOption={renderOptions}
+        selectOnFocus
+        clearOnEscape
+        handleHomeEndKeys
       />
     </InputRow>
   );
diff --git a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
index 6c6602c70b..c71775d8f2 100644
--- a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
+++ b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
@@ -2,7 +2,6 @@ import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
 import Autocomplete, {
   autocompleteClasses,
   AutocompleteProps,
-  createFilterOptions,
 } from "@mui/material/Autocomplete";
 import FormControl from "@mui/material/FormControl";
 import { inputLabelClasses } from "@mui/material/InputLabel";
@@ -19,25 +18,26 @@ const PopupIcon = (
   />
 );
 
-// T = value = string, multiple=false, disableClearable=true, freeSolo=true, chip="div"
 type RequiredAutocompleteProps<T> = Pick<
-  AutocompleteProps<T, false, true, true, "div">,
+  AutocompleteProps<T, false, false, true, "div">,
   "options" | "onChange"
 >;
 
 type OptionalAutocompleteProps<T> = Partial<
-  AutocompleteProps<T, false, true, true, "div">
+  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>;
 
@@ -74,7 +74,9 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   [`& .${outlinedInputClasses.root}, input`]: {
     cursor: "pointer",
-    backgroundColor: theme.palette.background.default,
+    // TODO extract as `format="data"` prop more like `Input` ? 
+    backgroundColor: "#f0f0f0",
+    fontFamily: theme.typography.data.fontFamily,
   },
   [`& .${inputLabelClasses.root}`]: {
     textDecoration: "underline",
@@ -94,12 +96,10 @@ export default function AutocompleteInput<T>(props: Props<T>) {
 
   return (
     <FormControl sx={{ display: "flex", flexDirection: "column" }}>
-      <StyledAutocomplete<T, false, true, true, "div">
-        sx={{ width: 300 }}
+      <StyledAutocomplete<T, false, false, true, "div">
         role="status"
         aria-atomic={true}
         aria-live="polite"
-        disableClearable
         popupIcon={PopupIcon}
         renderInput={(params) => (
           <StyledTextField
@@ -109,7 +109,8 @@ export default function AutocompleteInput<T>(props: Props<T>) {
               notched: false,
             }}
             label={props.label}
-            placeholder={props.placeholder}
+            placeholder={placeholder}
+            required={props.required}
           />
         )}
         componentsProps={{

From aa13297396bfcc4a3b6ff79d25c903ff2bb55feb Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 12 Dec 2024 09:42:07 +0100
Subject: [PATCH 04/18] Question options plus ODP enum overrides working

---
 .../src/@planx/components/Question/Editor.tsx | 59 +++++++++----------
 .../shared/DataFieldAutocomplete.tsx          | 43 +++++++++++---
 2 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index 9778b442e4..da53187b95 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -1,3 +1,4 @@
+import { getValidSchemaValues } from "@opensystemslab/planx-core";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { FormikErrors, FormikValues, useFormik } from "formik";
 import React, { useEffect, useRef } from "react";
@@ -95,35 +96,19 @@ const OptionEditor: React.FC<{
       />
     </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={(ev: React.ChangeEvent<HTMLInputElement>) => {
-      //     props.onChange({
-      //       ...props.value,
-      //       data: {
-      //         ...props.value.data,
-      //         val: ev.target.value,
-      //       },
-      //     });
-      //   }}
-      // />
+      <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={
@@ -184,6 +169,17 @@ export const Question: React.FC<Props> = (props) => {
 
   const schema = useStore().getFlowSchema();
 
+  const getOptionsSchemaByFn = (fn?: string, defaultOptionsSchema?: string[]) => {
+    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");
+
+    return schema;
+  }
+
   const focusRef = useRef<HTMLInputElement | null>(null);
 
   // horrible hack to remove focus from Rich Text Editor
@@ -258,7 +254,10 @@ export const Question: React.FC<Props> = (props) => {
               }) as Option
             }
             Editor={OptionEditor}
-            editorExtraProps={{ showValueField: !!formik.values.fn }}
+            editorExtraProps={{ 
+              showValueField: !!formik.values.fn, 
+              schema: getOptionsSchemaByFn(formik.values.fn, schema?.options),
+            }}
           />
         </ModalSectionContent>
       </ModalSection>
diff --git a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
index 71ca50e92c..c421076849 100644
--- a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -4,6 +4,8 @@ import {
   createFilterOptions
 } from "@mui/material/Autocomplete";
 import ListItem from "@mui/material/ListItem";
+import { FilterOptionsState } from "@mui/material/useAutocomplete";
+import isNull from "lodash/isNull";
 import React, { useMemo } from "react";
 import AutocompleteInput from "ui/shared/AutocompleteInput";
 import InputRow from "ui/shared/InputRow";
@@ -21,11 +23,13 @@ const renderOptions: AutocompleteProps<
   false,
   true,
   "div"
->["renderOption"] = (props, value) => (
-  <ListItem key={value} sx={{ fontFamily: (theme) => theme.typography.data.fontFamily }} {...props}>
-    {value}
-  </ListItem>
-);
+>["renderOption"] = (props, option) => {
+  return (
+    <ListItem key={option} sx={{ fontFamily: (theme) => theme.typography.data.fontFamily }} {...props}>
+      {option}
+    </ListItem>
+  );
+};
 
 const filter = createFilterOptions<string>();
 
@@ -39,10 +43,19 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
 
   const handleChange = (
     _event: React.SyntheticEvent,
-    value: string | null,
+    value: string | FilterOptionsState<string> | null,
     _reason: AutocompleteChangeReason,
   ) => {
-    props.onChange(value);
+    if (typeof value === "string") {
+      // Selecting an option
+      props.onChange(value);
+    } else if (value && value.inputValue) {
+      // Adding a new option
+      props.onChange(value.inputValue);
+    } else if (isNull(value)) {
+      // Clearing an option
+      props.onChange(value);
+    }
   };
 
   return (
@@ -52,12 +65,12 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
         key="data-field-autocomplete"
         placeholder="Data field"
         required={Boolean(props.required)}
-        options={options}
         onChange={handleChange}
+        value={value}
+        options={options}
         isOptionEqualToValue={(option: string, value: string) =>
           option === value
         }
-        value={value}
         filterOptions={(options, params) => {
           const filtered = filter(options, params);
           const { inputValue } = params;
@@ -68,6 +81,18 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
           }
           return filtered;
         }}
+        // getOptionLabel={(option) => {
+        //   // Value selected with enter, right from the input
+        //   if (typeof option === 'string') {
+        //     return option;
+        //   }
+        //   // Add "xxx" option created dynamically
+        //   if (option.inputValue) {
+        //     return option.inputValue;
+        //   }
+        //   // Regular option
+        //   return option;
+        // }}
         renderOption={renderOptions}
         selectOnFocus
         clearOnEscape

From 04e19ce79383d71b3783c679b6dcc06d8a89a7b1 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 17 Dec 2024 10:15:02 +0100
Subject: [PATCH 05/18] hide popup icon

---
 editor.planx.uk/src/ui/shared/AutocompleteInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
index c71775d8f2..ad477f661b 100644
--- a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
+++ b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
@@ -100,7 +100,7 @@ export default function AutocompleteInput<T>(props: Props<T>) {
         role="status"
         aria-atomic={true}
         aria-live="polite"
-        popupIcon={PopupIcon}
+        forcePopupIcon={false}
         renderInput={(params) => (
           <StyledTextField
             {...params}

From 949f0900f25006c3becb3405910492c3f417a056 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 17 Dec 2024 22:31:24 +0100
Subject: [PATCH 06/18] fix add new option

---
 .../src/@planx/components/Question/Editor.tsx | 24 ++----------
 .../shared/DataFieldAutocomplete.tsx          | 38 +++++++++----------
 .../src/@planx/components/shared/utils.ts     | 19 ++++++++++
 3 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index 5e1517e703..b948d25491 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -1,4 +1,3 @@
-import { getValidSchemaValues } from "@opensystemslab/planx-core";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { FormikErrors, FormikValues, useFormik } from "formik";
 import React, { useEffect, useRef } from "react";
@@ -19,6 +18,7 @@ import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformat
 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 {
@@ -75,25 +75,7 @@ export const Question: React.FC<Props> = (props) => {
   });
 
   const schema = useStore().getFlowSchema();
-
-  const getOptionsSchemaByFn = (fn?: string, defaultOptionsSchema?: string[]) => {
-    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
-    const initialOptions = props.options?.map((option) => option.data?.val);
-    initialOptions?.forEach((option) => {
-      if (option && !schema?.includes(option)) {
-        schema?.push(option);
-      }
-    });
-
-    return schema;
-  }
+  const initialOptionVals = props.options?.map((option) => option.data?.val);
 
   const focusRef = useRef<HTMLInputElement | null>(null);
 
@@ -171,7 +153,7 @@ export const Question: React.FC<Props> = (props) => {
             Editor={QuestionOptionsEditor}
             editorExtraProps={{ 
               showValueField: !!formik.values.fn, 
-              schema: getOptionsSchemaByFn(formik.values.fn, schema?.options),
+              schema: getOptionsSchemaByFn(formik.values.fn, schema?.options, initialOptionVals),
             }}
           />
         </ModalSectionContent>
diff --git a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
index c421076849..cdd16cd61b 100644
--- a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -4,7 +4,6 @@ import {
   createFilterOptions
 } from "@mui/material/Autocomplete";
 import ListItem from "@mui/material/ListItem";
-import { FilterOptionsState } from "@mui/material/useAutocomplete";
 import isNull from "lodash/isNull";
 import React, { useMemo } from "react";
 import AutocompleteInput from "ui/shared/AutocompleteInput";
@@ -43,15 +42,17 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
 
   const handleChange = (
     _event: React.SyntheticEvent,
-    value: string | FilterOptionsState<string> | null,
+    value: string | null,
     _reason: AutocompleteChangeReason,
   ) => {
     if (typeof value === "string") {
-      // Selecting an option
-      props.onChange(value);
-    } else if (value && value.inputValue) {
       // Adding a new option
-      props.onChange(value.inputValue);
+      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);
@@ -68,9 +69,6 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
         onChange={handleChange}
         value={value}
         options={options}
-        isOptionEqualToValue={(option: string, value: string) =>
-          option === value
-        }
         filterOptions={(options, params) => {
           const filtered = filter(options, params);
           const { inputValue } = params;
@@ -81,22 +79,20 @@ export const DataFieldAutocomplete: React.FC<Props> = (props) => {
           }
           return filtered;
         }}
-        // getOptionLabel={(option) => {
-        //   // Value selected with enter, right from the input
-        //   if (typeof option === 'string') {
-        //     return option;
-        //   }
-        //   // Add "xxx" option created dynamically
-        //   if (option.inputValue) {
-        //     return option.inputValue;
-        //   }
-        //   // Regular option
-        //   return option;
-        // }}
+        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;
+  }

From cd5f1b82d80e85f2ac283c8b37d06267c38b96c4 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 18 Dec 2024 10:14:18 +0100
Subject: [PATCH 07/18] more component types

---
 .../@planx/components/AddressInput/Editor.tsx | 23 ++++++++-------
 .../@planx/components/ContactInput/Editor.tsx | 21 +++++++-------
 .../@planx/components/DateInput/Editor.tsx    | 19 ++++++------
 .../@planx/components/FileUpload/Editor.tsx   |  7 +++--
 .../components/FileUploadAndLabel/Editor.tsx  | 29 +++++++++++--------
 .../src/@planx/components/List/Editor.tsx     | 20 ++++++-------
 .../@planx/components/MapAndLabel/Editor.tsx  | 20 ++++++-------
 .../src/@planx/components/Page/Editor.tsx     | 20 ++++++-------
 .../@planx/components/TextInput/Editor.tsx    | 21 +++++++-------
 9 files changed, 94 insertions(+), 86 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx b/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
index 35a9a643a1..20a9f35fb3 100644
--- a/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
@@ -9,6 +9,8 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { AddressInput, parseAddressInput } from "./model";
 
@@ -25,8 +27,11 @@ export default function AddressInputComponent(props: Props): FCReturn {
         });
       }
     },
-    validate: () => {},
+    validate: () => { },
   });
+
+  const schema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -51,16 +56,12 @@ 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
+            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/ContactInput/Editor.tsx b/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
index c8bb017dcb..ee360a648f 100644
--- a/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
@@ -9,6 +9,8 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { ContactInput, parseContactInput } from "./model";
 
@@ -27,6 +29,9 @@ export default function ContactInputComponent(props: Props): FCReturn {
     },
     validate: () => {},
   });
+
+  const schema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -51,16 +56,12 @@ 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
+            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/DateInput/Editor.tsx b/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
index b1e9bde74a..42814fa233 100644
--- a/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
@@ -17,6 +17,8 @@ import DateInputUi from "ui/shared/DateInput/DateInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 
 export type Props = EditorProps<TYPES.DateInput, DateInput>;
@@ -36,6 +38,8 @@ const DateInputComponent: React.FC<Props> = (props) => {
     validationSchema: editorValidationSchema(),
   });
 
+  const schema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal" name="modal">
       <ModalSection>
@@ -57,16 +61,11 @@ 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
+            schema={schema}
+            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 25ddd29b2c..4b36287e17 100644
--- a/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx
@@ -44,8 +44,11 @@ function Component(props: any) {
   });
 
   // Rather than default to generic `useStore().getFlowSchema()`
-  //   File Upload components can specifically reference ODP Schema enum options
-  const schema = getValidSchemaValues("FileType");
+  //   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">
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..2dc74a1418 100644
--- a/editor.planx.uk/src/@planx/components/List/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Editor.tsx
@@ -13,6 +13,8 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { EditorProps } from "../shared/types";
 import { List, parseContent, validationSchema } from "./model";
@@ -92,6 +94,8 @@ function ListComponent(props: Props) {
     validateOnChange: false,
   });
 
+  const dataFieldSchema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -114,16 +118,12 @@ 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
+            schema={dataFieldSchema}
+            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..e378bc7c57 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
@@ -17,6 +17,8 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import BasicRadio from "../shared/Radio/BasicRadio";
 import { EditorProps } from "../shared/types";
@@ -40,6 +42,8 @@ function MapAndLabelComponent(props: Props) {
     },
   });
 
+  const dataFieldSchema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -66,16 +70,12 @@ 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
+              schema={dataFieldSchema}
+              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/Page/Editor.tsx b/editor.planx.uk/src/@planx/components/Page/Editor.tsx
index 282e9087da..4366fbe127 100644
--- a/editor.planx.uk/src/@planx/components/Page/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Page/Editor.tsx
@@ -12,6 +12,8 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { EditorProps } from "../shared/types";
 import { Page, parsePage } from "./model";
@@ -34,6 +36,8 @@ function PageComponent(props: Props) {
     },
   });
 
+  const dataFieldSchema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -56,16 +60,12 @@ 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
+            schema={dataFieldSchema}
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
           <InputRow>
             <InputRowLabel>Schema</InputRowLabel>
             <InputRowItem>
diff --git a/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx b/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
index 054c71f287..71a7f866c9 100644
--- a/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
@@ -12,6 +12,8 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { parseTextInput, TextInput } from "./model";
 
@@ -28,9 +30,11 @@ const TextInputComponent: React.FC<Props> = (props) => {
         });
       }
     },
-    validate: () => {},
+    validate: () => { },
   });
 
+  const schema = useStore().getFlowSchema()?.nodes;
+
   const handleRadioChange = (event: React.SyntheticEvent<Element, Event>) => {
     const target = event.target as HTMLInputElement;
     formik.setFieldValue("type", target.value);
@@ -57,16 +61,11 @@ 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
+            schema={schema}
+            value={formik.values.fn}
+            onChange={(value) => formik.setFieldValue("fn", value)}
+          />
         </ModalSectionContent>
         <ModalSectionContent title="Input style">
           <FormControl component="fieldset">

From 5496a47aa689871163daf85d197eab2198e0240c Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 18 Dec 2024 11:15:25 +0100
Subject: [PATCH 08/18] final component types

---
 .../@planx/components/Calculate/Editor.tsx    | 21 ++++++++--------
 .../components/Checklist/Editor/Editor.tsx    | 25 +++++++------------
 .../components/Checklist/Editor/Options.tsx   | 12 ++++++++-
 .../Checklist/Editor/OptionsEditor.tsx        |  2 ++
 .../src/@planx/components/Question/Editor.tsx |  2 +-
 .../src/@planx/components/SetValue/Editor.tsx | 20 +++++++--------
 .../src/pages/FlowEditor/lib/store/editor.ts  | 10 +++++---
 7 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
index cce4fe5d6d..c40f921bd5 100644
--- a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
@@ -12,6 +12,8 @@ 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 { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import type { Calculate } from "./model";
 import { evaluate, getVariables, parseCalculate } from "./model";
@@ -25,6 +27,7 @@ const ConditionLabel = styled("span")(() => ({
 }));
 
 const UNKNOWN = "unknown";
+
 export default function Component(props: Props) {
   const formik = useFormik({
     initialValues: parseCalculate(props.node?.data),
@@ -101,6 +104,8 @@ export default function Component(props: Props) {
     }
   }, [formik.values.formula]);
 
+  const schema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -123,16 +128,12 @@ 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
+            schema={schema}
+            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 2fcc03c3de..4034072d8f 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
@@ -11,6 +11,8 @@ 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 { useStore } from "pages/FlowEditor/lib/store";
 import { parseBaseNodeData } from "../../shared";
 import { ICONS } from "../../shared/icons";
 import type { Checklist } from "../model";
@@ -95,6 +97,8 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
     }, 50);
   }, []);
 
+  const schema = useStore().getFlowSchema()?.nodes;
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -110,7 +114,6 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
                 inputRef={focusRef}
                 required
               />
-
               <ImgInput
                 img={formik.values.img}
                 onChange={(newUrl) => {
@@ -118,7 +121,6 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
                 }}
               />
             </InputRow>
-
             <InputRow>
               <RichTextInput
                 name="description"
@@ -127,18 +129,11 @@ export const ChecklistComponent: 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
+              schema={schema}
+              value={formik.values.fn}
+              onChange={(value) => formik.setFieldValue("fn", value)}
+            />
             <InputRow>
               <Switch
                 checked={!!formik.values.groupedOptions}
@@ -180,10 +175,8 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
             </InputRow>
           </InputGroup>
         </ModalSectionContent>
-
         <Options formik={formik} />
       </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 388c021dac..0e9bab6021 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -12,11 +12,17 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { useStore } from "pages/FlowEditor/lib/store";
 import { Option } from "../../shared";
 import type { Group } from "../model";
 import ChecklistOptionsEditor from "./OptionsEditor";
+import { getOptionsSchemaByFn } from "@planx/components/shared/utils";
 
 export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
+  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">
       {formik.values.groupedOptions ? (
@@ -103,6 +109,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?.options, initialOptionVals),
                     }}
                   />
                 </Box>
@@ -143,7 +150,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?.options, initialOptionVals),
+          }}
         />
       )}
     </ModalSectionContent>
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/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index b948d25491..ecb4864689 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -75,7 +75,7 @@ export const Question: React.FC<Props> = (props) => {
   });
 
   const schema = useStore().getFlowSchema();
-  const initialOptionVals = props.options?.map((option) => option.data?.val);
+  const initialOptionVals = formik.initialValues.options?.map((option) => option.data?.val);
 
   const focusRef = useRef<HTMLInputElement | null>(null);
 
diff --git a/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx b/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
index 6bf65d51ca..805112fdef 100644
--- a/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
@@ -12,6 +12,8 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { useStore } from "pages/FlowEditor/lib/store";
+import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { parseSetValue, SetValue } from "./model";
 
 type Props = EditorProps<TYPES.SetValue, SetValue>;
@@ -92,20 +94,18 @@ function SetValueComponent(props: Props) {
     formik.setFieldValue("operation", target.value);
   };
 
+  const schema = useStore().getFlowSchema()?.nodes;
+
   return (
     <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
+            schema={schema}
+            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/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index f65b0212a5..9b662be5d7 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -612,20 +612,24 @@ export const editorStore: StateCreator<
     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?.fn) nodes.add(node.data.fn);
       if (node.data?.output) nodes.add(node.data.output);
       if (node.data?.dataFieldBoundary) nodes.add(node.data.dataFieldBoundary);
 
       if (node.data?.val) {
-        // Exclude flag values; Filter options are not configurable by editors, therefore their val shouldn't be suggested
+        // 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).filter((node) => node !== "flag").sort(),
+      nodes: Array.from(nodes).sort(),
       options: Array.from(options).sort(),
     };
   },

From 6dba5b7d850dd69e27842b8c956234464bfd3e64 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 18 Dec 2024 11:28:03 +0100
Subject: [PATCH 09/18] type fix

---
 .../src/@planx/components/Checklist/Editor/Options.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 0e9bab6021..e3202d6331 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -109,7 +109,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?.options, initialOptionVals),
+                      schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
                     }}
                   />
                 </Box>
@@ -152,7 +152,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
           Editor={ChecklistOptionsEditor}
           editorExtraProps={{ 
             showValueField: !!formik.values.fn,
-            schema: getOptionsSchemaByFn(formik.values.fn, schema?.options, initialOptionVals),
+            schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
           }}
         />
       )}

From c27fdf1ef135d0b1ad92f4e49a659c14e022c231 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 18 Dec 2024 21:02:00 +0100
Subject: [PATCH 10/18] update e2e placeholders

---
 e2e/tests/ui-driven/src/helpers/addComponent.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 0ad8f252d1..90bd6a0151 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -55,11 +55,11 @@ const createBaseComponent = async (
       break;
     case ComponentType.AddressInput:
       await page.getByPlaceholder("Title").fill(title || "");
-      await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
+      await page.getByPlaceholder("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.getByPlaceholder("Data field").fill(options?.[0] || "");
       break;
     case ComponentType.TaskList:
       await page.getByPlaceholder("Main Title").fill(title || "");
@@ -108,15 +108,15 @@ const createBaseComponent = async (
       }
       break;
     case ComponentType.FileUpload:
-      await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
+      await page.getByPlaceholder("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.getByPlaceholder("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.getByPlaceholder("Data field").fill(options?.[0] || "");
       break;
     case ComponentType.Content:
       await page
@@ -172,7 +172,7 @@ 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.getByPlaceholder("Data field").fill(dataField);
   await createComponentOptionsWithDataValues(page, options);
   await page.locator('button[form="modal"][type="submit"]').click();
 };
@@ -377,7 +377,7 @@ async function createComponentOptionsWithDataValues(
   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);
+    await page.getByPlaceholder("Data field").nth(index).fill(option.dataValue);
     index++;
   }
 }

From cea734f346ccfba5fb8b3bb80d3928ee3af89404 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 18 Dec 2024 21:54:46 +0100
Subject: [PATCH 11/18] try page.locator by id in e2e, placeholder matches
 multiple elements

---
 e2e/tests/ui-driven/src/helpers/addComponent.ts    | 14 +++++++-------
 .../src/ui/shared/AutocompleteInput.tsx            |  8 --------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 90bd6a0151..704607708f 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -55,11 +55,11 @@ const createBaseComponent = async (
       break;
     case ComponentType.AddressInput:
       await page.getByPlaceholder("Title").fill(title || "");
-      await page.getByPlaceholder("Data field").fill(options?.[0] || "");
+      await page.locator("id=data-field-autocomplete").fill(options?.[0] || "");
       break;
     case ComponentType.ContactInput:
       await page.getByPlaceholder("Title").fill(title || "");
-      await page.getByPlaceholder("Data field").fill(options?.[0] || "");
+      await page.locator("id=data-field-autocomplete").fill(options?.[0] || "");
       break;
     case ComponentType.TaskList:
       await page.getByPlaceholder("Main Title").fill(title || "");
@@ -108,15 +108,15 @@ const createBaseComponent = async (
       }
       break;
     case ComponentType.FileUpload:
-      await page.getByPlaceholder("Data field").fill(options?.[0] || "");
+      await page.locator("id=data-field-autocomplete").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.locator("id=data-field-autocomplete").fill(options?.[1] || "");
       break;
     case ComponentType.List:
       await page.getByPlaceholder("Title").fill(title || "");
-      await page.getByPlaceholder("Data field").fill(options?.[0] || "");
+      await page.locator("id=data-field-autocomplete").fill(options?.[0] || "");
       break;
     case ComponentType.Content:
       await page
@@ -172,7 +172,7 @@ 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.locator("id=data-field-autocomplete").fill(dataField);
   await createComponentOptionsWithDataValues(page, options);
   await page.locator('button[form="modal"][type="submit"]').click();
 };
@@ -377,7 +377,7 @@ async function createComponentOptionsWithDataValues(
   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 field").nth(index).fill(option.dataValue);
+    await page.locator("id=data-field-autocomplete").nth(index).fill(option.dataValue);
     index++;
   }
 }
diff --git a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
index ad477f661b..831b689663 100644
--- a/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
+++ b/editor.planx.uk/src/ui/shared/AutocompleteInput.tsx
@@ -1,4 +1,3 @@
-import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
 import Autocomplete, {
   autocompleteClasses,
   AutocompleteProps,
@@ -11,13 +10,6 @@ import TextField from "@mui/material/TextField";
 import React from "react";
 import { borderedFocusStyle } from "theme";
 
-const PopupIcon = (
-  <ArrowIcon
-    sx={(theme) => ({ color: theme.palette.primary.main })}
-    fontSize="large"
-  />
-);
-
 type RequiredAutocompleteProps<T> = Pick<
   AutocompleteProps<T, false, false, true, "div">,
   "options" | "onChange"

From 8e11f6c349eb9dbd59234a526ec387d6dab57e41 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Wed, 18 Dec 2024 22:01:13 +0100
Subject: [PATCH 12/18] prettier

---
 e2e/tests/ui-driven/src/helpers/addComponent.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 704607708f..3fecd52224 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -377,7 +377,10 @@ async function createComponentOptionsWithDataValues(
   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.locator("id=data-field-autocomplete").nth(index).fill(option.dataValue);
+    await page
+      .locator("id=data-field-autocomplete")
+      .nth(index)
+      .fill(option.dataValue);
     index++;
   }
 }

From 83e6e3ad86c7d09658a0b059d7171ba0ca135bce Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 19 Dec 2024 08:26:34 +0100
Subject: [PATCH 13/18] try getByRole('combobox')

---
 .../ui-driven/src/helpers/addComponent.ts     | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 3fecd52224..c8c11ddeea 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -55,11 +55,15 @@ const createBaseComponent = async (
       break;
     case ComponentType.AddressInput:
       await page.getByPlaceholder("Title").fill(title || "");
-      await page.locator("id=data-field-autocomplete").fill(options?.[0] || "");
+      await page
+        .getByRole("combobox", { name: "Data field" })
+        .fill(options?.[0] || "");
       break;
     case ComponentType.ContactInput:
       await page.getByPlaceholder("Title").fill(title || "");
-      await page.locator("id=data-field-autocomplete").fill(options?.[0] || "");
+      await page
+        .getByRole("combobox", { name: "Data field" })
+        .fill(options?.[0] || "");
       break;
     case ComponentType.TaskList:
       await page.getByPlaceholder("Main Title").fill(title || "");
@@ -108,15 +112,21 @@ const createBaseComponent = async (
       }
       break;
     case ComponentType.FileUpload:
-      await page.locator("id=data-field-autocomplete").fill(options?.[0] || "");
+      await page
+        .getByRole("combobox", { name: "Data field" })
+        .fill(options?.[0] || "");
       break;
     case ComponentType.FileUploadAndLabel:
       await page.getByPlaceholder("File type").fill(options?.[0] || "");
-      await page.locator("id=data-field-autocomplete").fill(options?.[1] || "");
+      await page
+        .getByRole("combobox", { name: "Data field" })
+        .fill(options?.[1] || "");
       break;
     case ComponentType.List:
       await page.getByPlaceholder("Title").fill(title || "");
-      await page.locator("id=data-field-autocomplete").fill(options?.[0] || "");
+      await page
+        .getByRole("combobox", { name: "Data field" })
+        .fill(options?.[0] || "");
       break;
     case ComponentType.Content:
       await page
@@ -172,7 +182,7 @@ export const createQuestionWithDataFieldOptions = async (
   await locatingNode.click();
   await page.getByRole("dialog").waitFor();
   await page.getByPlaceholder("Text").fill(questionText);
-  await page.locator("id=data-field-autocomplete").fill(dataField);
+  await page.getByRole("combobox", { name: "Data field" }).fill(dataField);
   await createComponentOptionsWithDataValues(page, options);
   await page.locator('button[form="modal"][type="submit"]').click();
 };
@@ -378,7 +388,7 @@ async function createComponentOptionsWithDataValues(
     await page.locator("button").filter({ hasText: "add new" }).click();
     await page.getByPlaceholder("Option").nth(index).fill(option.optionText);
     await page
-      .locator("id=data-field-autocomplete")
+      .getByRole("combobox", { name: "Data field" })
       .nth(index)
       .fill(option.dataValue);
     index++;

From 5114475b7486bcd2f0f004b1fd6e89f6f4371a34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 20 Dec 2024 10:52:42 +0000
Subject: [PATCH 14/18] fix(e2e): Add click on combobox

---
 e2e/tests/ui-driven/src/helpers/addComponent.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index c8c11ddeea..3031506623 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -55,12 +55,14 @@ const createBaseComponent = async (
       break;
     case ComponentType.AddressInput:
       await page.getByPlaceholder("Title").fill(title || "");
+      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.getByRole("combobox", { name: "Data field" }).click();
       await page
         .getByRole("combobox", { name: "Data field" })
         .fill(options?.[0] || "");
@@ -112,18 +114,21 @@ const createBaseComponent = async (
       }
       break;
     case ComponentType.FileUpload:
+      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.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.getByRole("combobox", { name: "Data field" }).click();
       await page
         .getByRole("combobox", { name: "Data field" })
         .fill(options?.[0] || "");
@@ -387,6 +392,7 @@ async function createComponentOptionsWithDataValues(
   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.getByRole("combobox", { name: "Data field" }).click();
     await page
       .getByRole("combobox", { name: "Data field" })
       .nth(index)

From 867a6c2130c0ff214a85278681c3a4059bfdbc1b Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 20 Dec 2024 16:40:20 +0100
Subject: [PATCH 15/18] set default schema options and remove
 getFlowSchema()?.nodes calls per component

---
 editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx | 3 ---
 editor.planx.uk/src/@planx/components/Calculate/Editor.tsx    | 4 ----
 .../src/@planx/components/Checklist/Editor/Editor.tsx         | 4 ----
 editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx | 4 ----
 editor.planx.uk/src/@planx/components/DateInput/Editor.tsx    | 4 ----
 editor.planx.uk/src/@planx/components/List/Editor.tsx         | 4 ----
 editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx  | 4 ----
 editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx  | 4 ----
 editor.planx.uk/src/@planx/components/Page/Editor.tsx         | 4 ----
 editor.planx.uk/src/@planx/components/SetValue/Editor.tsx     | 4 ----
 editor.planx.uk/src/@planx/components/TextInput/Editor.tsx    | 4 ----
 .../src/@planx/components/shared/DataFieldAutocomplete.tsx    | 4 +++-
 12 files changed, 3 insertions(+), 44 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx b/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
index 20a9f35fb3..864ab1dcf0 100644
--- a/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
@@ -30,8 +30,6 @@ export default function AddressInputComponent(props: Props): FCReturn {
     validate: () => { },
   });
 
-  const schema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -58,7 +56,6 @@ export default function AddressInputComponent(props: Props): FCReturn {
           </InputRow>
           <DataFieldAutocomplete
             required
-            schema={schema}
             value={formik.values.fn}
             onChange={(value) => formik.setFieldValue("fn", value)}
           />
diff --git a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
index c40f921bd5..66b4be10cb 100644
--- a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
@@ -12,7 +12,6 @@ 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 { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import type { Calculate } from "./model";
@@ -104,8 +103,6 @@ export default function Component(props: Props) {
     }
   }, [formik.values.formula]);
 
-  const schema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -130,7 +127,6 @@ export default function Component(props: Props) {
         <ModalSectionContent title="Output">
           <DataFieldAutocomplete
             required
-            schema={schema}
             value={formik.values.output}
             onChange={(value) => formik.setFieldValue("output", value)}
           />
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 662f2a25b4..a197a89170 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
@@ -13,7 +13,6 @@ import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
 
 import { DataFieldAutocomplete } from "@planx/components/shared/DataFieldAutocomplete";
-import { useStore } from "pages/FlowEditor/lib/store";
 import { Option, parseBaseNodeData } from "../../shared";
 import { ICONS } from "../../shared/icons";
 import type { Checklist } from "../model";
@@ -110,8 +109,6 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
     }, 50);
   }, []);
 
-  const schema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -143,7 +140,6 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
               />
             </InputRow>
             <DataFieldAutocomplete
-              schema={schema}
               value={formik.values.fn}
               onChange={(value) => formik.setFieldValue("fn", value)}
             />
diff --git a/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx b/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
index ee360a648f..9e52e20a67 100644
--- a/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
@@ -9,7 +9,6 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { ContactInput, parseContactInput } from "./model";
@@ -30,8 +29,6 @@ export default function ContactInputComponent(props: Props): FCReturn {
     validate: () => {},
   });
 
-  const schema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -58,7 +55,6 @@ export default function ContactInputComponent(props: Props): FCReturn {
           </InputRow>
           <DataFieldAutocomplete
             required
-            schema={schema}
             value={formik.values.fn}
             onChange={(value) => formik.setFieldValue("fn", value)}
           />
diff --git a/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx b/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
index 42814fa233..7b1f143fdb 100644
--- a/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
@@ -17,7 +17,6 @@ import DateInputUi from "ui/shared/DateInput/DateInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 
@@ -38,8 +37,6 @@ const DateInputComponent: React.FC<Props> = (props) => {
     validationSchema: editorValidationSchema(),
   });
 
-  const schema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal" name="modal">
       <ModalSection>
@@ -62,7 +59,6 @@ const DateInputComponent: React.FC<Props> = (props) => {
             />
           </InputRow>
           <DataFieldAutocomplete
-            schema={schema}
             value={formik.values.fn}
             onChange={(value) => formik.setFieldValue("fn", value)}
           />
diff --git a/editor.planx.uk/src/@planx/components/List/Editor.tsx b/editor.planx.uk/src/@planx/components/List/Editor.tsx
index 2dc74a1418..490cea7477 100644
--- a/editor.planx.uk/src/@planx/components/List/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Editor.tsx
@@ -13,7 +13,6 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { EditorProps } from "../shared/types";
@@ -94,8 +93,6 @@ function ListComponent(props: Props) {
     validateOnChange: false,
   });
 
-  const dataFieldSchema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -120,7 +117,6 @@ function ListComponent(props: Props) {
           </InputRow>
           <DataFieldAutocomplete
             required
-            schema={dataFieldSchema}
             value={formik.values.fn}
             onChange={(value) => formik.setFieldValue("fn", value)}
           />
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
index e378bc7c57..dde20fafb2 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
@@ -17,7 +17,6 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import BasicRadio from "../shared/Radio/BasicRadio";
@@ -42,8 +41,6 @@ function MapAndLabelComponent(props: Props) {
     },
   });
 
-  const dataFieldSchema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -72,7 +69,6 @@ function MapAndLabelComponent(props: Props) {
             </InputRow>
             <DataFieldAutocomplete
               required
-              schema={dataFieldSchema}
               value={formik.values.fn}
               onChange={(value) => formik.setFieldValue("fn", value)}
             />
diff --git a/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx b/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
index 6fd9a02242..29bb7d4707 100644
--- a/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx
@@ -14,7 +14,6 @@ import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 import { Switch } from "ui/shared/Switch";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 
@@ -31,8 +30,6 @@ export default function NumberInputComponent(props: Props): FCReturn {
     validate: () => {},
   });
 
-  const schema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -58,7 +55,6 @@ export default function NumberInputComponent(props: Props): FCReturn {
             />
           </InputRow>
           <DataFieldAutocomplete
-            schema={schema}
             value={formik.values.fn}
             onChange={(value) => formik.setFieldValue("fn", value)}
           />
diff --git a/editor.planx.uk/src/@planx/components/Page/Editor.tsx b/editor.planx.uk/src/@planx/components/Page/Editor.tsx
index 4366fbe127..f466f2697c 100644
--- a/editor.planx.uk/src/@planx/components/Page/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Page/Editor.tsx
@@ -12,7 +12,6 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { EditorProps } from "../shared/types";
@@ -36,8 +35,6 @@ function PageComponent(props: Props) {
     },
   });
 
-  const dataFieldSchema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -62,7 +59,6 @@ function PageComponent(props: Props) {
           </InputRow>
           <DataFieldAutocomplete
             required
-            schema={dataFieldSchema}
             value={formik.values.fn}
             onChange={(value) => formik.setFieldValue("fn", value)}
           />
diff --git a/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx b/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
index 805112fdef..b1ebc9de72 100644
--- a/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/SetValue/Editor.tsx
@@ -12,7 +12,6 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { parseSetValue, SetValue } from "./model";
 
@@ -94,15 +93,12 @@ function SetValueComponent(props: Props) {
     formik.setFieldValue("operation", target.value);
   };
 
-  const schema = useStore().getFlowSchema()?.nodes;
-
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
         <ModalSectionContent title="Passport field name">
           <DataFieldAutocomplete
             required
-            schema={schema}
             value={formik.values.fn}
             onChange={(value) => formik.setFieldValue("fn", value)}
           />
diff --git a/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx b/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
index 71a7f866c9..0d38f161d9 100644
--- a/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
@@ -12,7 +12,6 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { parseTextInput, TextInput } from "./model";
@@ -33,8 +32,6 @@ const TextInputComponent: React.FC<Props> = (props) => {
     validate: () => { },
   });
 
-  const schema = useStore().getFlowSchema()?.nodes;
-
   const handleRadioChange = (event: React.SyntheticEvent<Element, Event>) => {
     const target = event.target as HTMLInputElement;
     formik.setFieldValue("type", target.value);
@@ -62,7 +59,6 @@ const TextInputComponent: React.FC<Props> = (props) => {
             />
           </InputRow>
           <DataFieldAutocomplete
-            schema={schema}
             value={formik.values.fn}
             onChange={(value) => formik.setFieldValue("fn", value)}
           />
diff --git a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
index cdd16cd61b..ff7d2a21b0 100644
--- a/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/DataFieldAutocomplete.tsx
@@ -5,6 +5,7 @@ import {
 } 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";
@@ -33,7 +34,8 @@ const renderOptions: AutocompleteProps<
 const filter = createFilterOptions<string>();
 
 export const DataFieldAutocomplete: React.FC<Props> = (props) => {
-  const { value: initialValue, schema: options = [] } = props;
+  const defaultSchema = useStore().getFlowSchema()?.nodes || [];
+  const { value: initialValue, schema: options = defaultSchema } = props;
 
   const value: string | undefined = useMemo(
     () => options?.find((option) => option === initialValue),

From e57ba7f1927e2fecac528ba45922342d1f85956f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 20 Dec 2024 15:49:33 +0000
Subject: [PATCH 16/18] fix(e2e): Missing clicks and enters

---
 e2e/tests/ui-driven/src/helpers/addComponent.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 3031506623..2df6985514 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -187,7 +187,9 @@ export const createQuestionWithDataFieldOptions = async (
   await locatingNode.click();
   await page.getByRole("dialog").waitFor();
   await page.getByPlaceholder("Text").fill(questionText);
+  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();
 };
@@ -392,11 +394,15 @@ async function createComponentOptionsWithDataValues(
   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.getByRole("combobox", { name: "Data field" }).click();
+    await page.getByRole("combobox", { name: "Data field" }).nth(index).click();
     await page
       .getByRole("combobox", { name: "Data field" })
       .nth(index)
       .fill(option.dataValue);
+    await page
+      .getByRole("combobox", { name: "Data field" })
+      .nth(index)
+      .press("Enter");
     index++;
   }
 }

From a24345add238264b0d0c9551579a6d0232c2b0d8 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 20 Dec 2024 17:09:35 +0100
Subject: [PATCH 17/18] rebase

---
 editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx b/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
index 864ab1dcf0..839f45a51c 100644
--- a/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
@@ -9,7 +9,6 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
-import { useStore } from "pages/FlowEditor/lib/store";
 import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
 import { ICONS } from "../shared/icons";
 import { AddressInput, parseAddressInput } from "./model";

From ec9c83279a2e9c98d9ae5196216fb0d975f7eefe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 20 Dec 2024 16:28:41 +0000
Subject: [PATCH 18/18] fix(e2e): Drop index, use last. Match by value without
 using fill()

---
 e2e/tests/ui-driven/src/helpers/addComponent.ts | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/e2e/tests/ui-driven/src/helpers/addComponent.ts b/e2e/tests/ui-driven/src/helpers/addComponent.ts
index 9058eb1e08..32b979e958 100644
--- a/e2e/tests/ui-driven/src/helpers/addComponent.ts
+++ b/e2e/tests/ui-driven/src/helpers/addComponent.ts
@@ -394,20 +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.getByRole("combobox", { name: "Data field" }).nth(index).click();
-    await page
-      .getByRole("combobox", { name: "Data field" })
-      .nth(index)
-      .fill(option.dataValue);
+    await page.getByPlaceholder("Option").last().fill(option.optionText);
+    await page.getByRole("combobox", { name: "Data field" }).last().click();
     await page
-      .getByRole("combobox", { name: "Data field" })
-      .nth(index)
-      .press("Enter");
-    index++;
+      .getByRole("option", { name: option.dataValue, exact: true })
+      .click();
   }
 }