[Bug][DynamicForm] OnBeforeSubmit does not fire when using a mandatory field in the FieldOverrides

[Benatiabacemdev]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

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

Expected / Desired Behavior / Question

In DynamicForm, when I use fieldoverrides with a required field, onBeforeSubmit does not fire and the form is not submitted. By default the field was red (error) and when I type something it turns black and without an error message, but when I click submit nothing happens. if I update the list field as non-required, the dynamic form works fine.

Observed Behavior

In DynamicForm, when I use fieldoverrides with a required field, onBeforeSubmit does not fire and the form is not submitted.

Steps to Reproduce

By default the field was red (error) and when I type something it turns black and without an error message, but when I click submit nothing happens. if I update the list field as non-required, the dynamic form works fine.

Thanks!

[github-actions]

Thank you for submitting your first issue to this project.

[BlazeOfFeathers]

Same issue here!

[martinlingstuyl]

Same here. The problem seems to be that for fieldOverrides, the forms field-onChange handler is not triggered, leading to the fields newValue not being set in the DynamicForm.

This did work correctly in version 3.15.0 though...

[martinlingstuyl]

Ok, so the point is you need to let the DynamicForm know that a field has changed.

So if your override contains a TextField control for example, you'll need to implement an event handler, like onChange or onBlur. In the event you call the onChanged function in the fieldProperties, like so:

private renderField = (
    fieldProperties: IDynamicFieldProps
  ): React.ReactElement<IDynamicFieldProps> => {
    return (
      <>
        <div className={styles.fieldWrapper}>
          <TextField
            label={strings.SiteName}
            defaultValue={fieldProperties.value}
            onChange={(ev, newValue) =>
              fieldProperties.onChanged(fieldProperties.columnInternalName, newValue, true);
            }
            required={fieldProperties.required}
            disabled={fieldProperties.disabled}
            placeholder={fieldProperties.placeholder}
            autoComplete="off"
          />
          <text className={styles.fieldDescription}>
            {fieldProperties.description}
          </text>
        </div>
      </>
    );
  };

in version 3.15.0 you could use fieldValues.newValue = newValue in the event. But now you need to call the onChanged function.