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<{
/>
{props.showValueField && (
-
- {
- props.onChange({
- ...props.value,
- data: {
- ...props.value.data,
- val: ev.target.value,
- },
- });
- }}
- />
-
- // ) => {
- // props.onChange({
- // ...props.value,
- // data: {
- // ...props.value.data,
- // val: ev.target.value,
- // },
- // });
- // }}
- // />
+ {
+ props.onChange({
+ ...props.value,
+ data: {
+ ...props.value.data,
+ val: targetValue ? targetValue : undefined,
+ },
+ });
+ }}
+ />
)}
= (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(null);
// horrible hack to remove focus from Rich Text Editor
@@ -258,7 +254,10 @@ export const Question: React.FC = (props) => {
}) as Option
}
Editor={OptionEditor}
- editorExtraProps={{ showValueField: !!formik.values.fn }}
+ editorExtraProps={{
+ showValueField: !!formik.values.fn,
+ schema: getOptionsSchemaByFn(formik.values.fn, schema?.options),
+ }}
/>
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) => (
- theme.typography.data.fontFamily }} {...props}>
- {value}
-
-);
+>["renderOption"] = (props, option) => {
+ return (
+ theme.typography.data.fontFamily }} {...props}>
+ {option}
+
+ );
+};
const filter = createFilterOptions();
@@ -39,10 +43,19 @@ export const DataFieldAutocomplete: React.FC = (props) => {
const handleChange = (
_event: React.SyntheticEvent,
- value: string | null,
+ value: string | FilterOptionsState | 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) => {
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) => {
}
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