[Dynamic Form] Disable issue on "fieldOverrides" field control when "onBeforeSubmit" return true

[wuxiaojun514]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.16 ]

This issue also occurs on old version like 3.14

Expected / Desired Behavior / Question

I am using DynamicForm control and created several customized rendered fields with "fieldOverrides".
I also put validation logic (e.g. "start date" should be before "end date") in "onBeforeSubmit" method.
Then I found that if the validation failed (onBeforeSubmit return true), then my customized fields will always be disabled in the form, user cannot modify them. However user can still modify the fields which are not mentioned in "fieldOverrides".

Steps to Reproduce

1. Create a spfx form customizer extension
2. Add Dynamic Form control in it (like TestForm )
3. Create a customized render field control method ( I copied most of the content from DynamicField.tsx )

I used disabled={disabled} in TextField Control

private renderTextField = (fieldProperties: IDynamicFieldProps): React.ReactElement<IDynamicFieldProps> => {

    
    const {
      options,
      fieldTermSetId,
      fieldAnchorId,
      lookupListID,
      lookupField,
      fieldType,
      fieldDefaultValue,
      fieldTitle,
      context,
      disabled,
      label,
      required,
      isRichText,
      //bingAPIKey,
      dateFormat,
      firstDayOfWeek,
      columnInternalName,
      principalType,
      description
  } = fieldProperties;

  const labelText = fieldTitle !== null ? fieldTitle : label;
  const defaultValue = fieldDefaultValue;
  const isRequired= fieldProperties.required ? fieldProperties.required:required;

  const labelEl = <label className={(isRequired) ? styles.fieldRequired + ' ' + styles.fieldLabel : styles.fieldLabel}>{labelText}</label>;
  const descriptionEl = <text className={styles.fieldDescription}>{description}</text>;
  const placeHolder=fieldProperties.placeholder;

    return (
      <div>
      <div className={styles.titleContainer}>
        <Icon className={styles.fieldIcon} iconName={"TextField"} />
        {labelEl}
      </div>

      <TextField
        defaultValue={defaultValue}
        placeholder={placeHolder}
        className={styles.fieldDisplay}


        onChange={(e, newText) => { (newText: any): void => { 
          const {
            onChanged,
            columnInternalName
          } = fieldProperties;
      
          if (onChanged) {
            onChanged(columnInternalName, newText);
          }
          this.setState({
            changedValue: newText
          });
        } }}
        disabled={disabled}

      />
      {descriptionEl}
    </div>
    )
  }

Then use this renderTextField method on DynamicForm and let onBeforeSubmit return true (validation failed)

 <DynamicForm
          context={this.props.context}
          listId={this.props.context.list.guid.toString()}
          listItemId={this.props.context.itemId}
          fieldOverrides={{
            "JobTitle": this.renderTextField  //use any text field
          }}

          onBeforeSubmit={
            async (listItem) => { 
              alert("validation failed!");
              return true; 
            }
          }
      />

This demo field (Job Title in my example) will be read-only after submit button clicked while the other fields still be editable

If your form has a lot fields, then user has to refresh page and fill in again after validation failed

My Trouble shooting

I did some trouble shooting on dynamic form source code.

I found that it will modify "fieldOverrides" fields's disable property when it is isSaving however it won't change "DynamicField"'s disable property. So the those "Dynamic" fields would still use its original "disable" property

Right now my temporary solution is not use disabled={disabled} in customized field control.
Hope we can find a better solution.

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[wuxiaojun514]

I found a solution, I replaced

 v.disabled = v.disabled || isSaving;
 return fieldOverrides[v.columnInternalName](v);

with
return fieldOverrides[v.columnInternalName]({ ...v,disabled: v.disabled || isSaving} )

,then it works well.
I will submit a PR for this hotfix.

[joelfmrodrigues]

Thanks @wuxiaojun514 ! I will assign this issue to you so no one else works on it

[wuxiaojun514]

Hi @joelfmrodrigues ,
I have created the PR #1716 for it.
I downloaded the latest code and tested it.