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