Merge pull request #1490 from smarterbusiness/bugfix/dynamicform-fix-required-multi-fields

DynamicForm - Fixing Required Multi Field Saving Problem

Author: joaojmendes

src/controls/dynamicForm/DynamicForm.tsx

@@ -104,7 +104,7 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
   }
 
   //trigger when the user submits the form.
-  private onSubmitClick = async (): Promise<void> => {
+    private onSubmitClick = async (): Promise<void> => {
     const {
       listId,
       listItemId,
@@ -132,6 +132,10 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
             val.fieldDefaultValue = '';
             shouldBeReturnBack = true;
           }
+          else if (Array.isArray(val.newValue) && val.newValue.length === 0) {
+            val.fieldDefaultValue = null;
+            shouldBeReturnBack = true;
+          }
         }
       });
       if (shouldBeReturnBack) {

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -32,12 +32,12 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
       spfxContext: { pageContext: this.props.context.pageContext }
     });
     this.state = {
-      changedValue: props.fieldDefaultValue
+      changedValue: props.fieldType === 'Thumbnail' ? props.fieldDefaultValue : null
     };
   }
 
   public componentDidUpdate(): void {
-    if (this.props.fieldDefaultValue === "" && this.state.changedValue === null) {
+    if ((this.props.fieldDefaultValue === "" || this.props.fieldDefaultValue === null) && this.state.changedValue === null) {
       this.setState({ changedValue: "" });
     }
   }
@@ -585,7 +585,11 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
     const {
       changedValue
     } = this.state;
-    return (changedValue === undefined || changedValue === '') && this.props.required ? strings.DynamicFormRequiredErrorMessage : null;
+    return (changedValue === undefined || changedValue === '' || this.isEmptyArray(changedValue)) && this.props.required ? strings.DynamicFormRequiredErrorMessage : null;
+  }
+
+  private isEmptyArray(value) {
+    return Array.isArray(value) && value.length === 0;
   }
 
   private MultiChoice_selection = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {