Merge pull request #14 from fullstacklabs/GDCM-1053

Prevent SelectField to accept unknown options

Author: icasardila

src/DForm.js

@@ -66,14 +66,17 @@ const DForm = ({
     validationSchema,
     validateOnMount: true,
     validateOnChange: true,
-  });
+  })
   const { isValid, setFieldTouched, setFieldValue, values, errors } = formik
 
   // Formik reinitialize is not working when the initialValues change. This is just happening once
   // the first time you move from a section to another.
-  let sectionValues = values;
+  let sectionValues = values
   if (values && initialValues) {
-    sectionValues = difference(Object.keys(values), Object.keys(initialValues)).length ? initialValues : values
+    sectionValues = difference(Object.keys(values), Object.keys(initialValues))
+      .length
+      ? initialValues
+      : values
   }
 
   useEffect(() => {
@@ -96,7 +99,6 @@ const DForm = ({
     if (currentSectionIndex > 0) setCurrentSectionIndex(currentSectionIndex - 1)
   }
 
-
   const renderFields = () => (
     <FormikProvider value={formik}>
       <FieldsList

src/fields/SelectField.js

@@ -29,22 +29,28 @@ const SelectField = ({
   removeItem,
   index,
 }) => {
-  const onFieldChange = (value) => {
-    let newValue = value // selected item(s)
+  const isMultiple = MultipleTypeFormats.includes(field.schema.format)
 
-    if (
-      MultipleTypeFormats.includes(field.schema.format) &&
-      !Array.isArray(newValue)
-    ) {
-      newValue = newValue ? [newValue] : []
+  const onFieldChange = (newValue) => {
+    let arrValue = castArray(newValue) // selected item(s)
+
+    if (!isMultiple && value && arrValue[0] === value[0]) {
+      // to de-select already selected option
+      arrValue = []
     }
 
     setFieldTouched(field.id, true)
-    setFieldValue(field.id, newValue)
+    // we check that all new selected options are present in the field schema options definition
+    // to prevent saving unkown options
+    if (
+      intersection(arrValue, field.schema.options).length === arrValue.length
+    ) {
+      setFieldValue(field.id, arrValue)
+    }
   }
 
   const activeSubform = useMemo(() => {
-    if (MultipleTypeFormats.includes(field.schema.format)) return null
+    if (isMultiple) return null
     if (!field.subforms?.length || !value?.length) return null
 
     return field.subforms.find(

src/helpers/formMapper.js

@@ -45,9 +45,8 @@ export const mapFieldAnswersToFormValues = (
 
   const fieldAnswers = answersByFieldId[field.id] || []
 
-  if (field.fieldType === 'select' && field.schema.multiple) {
+  if (field.fieldType === 'select' && field.schema.multiple)
     return fieldAnswers.map((answer) => answer.value)
-  }
 
   const fieldAnswer = fieldAnswers[0]