[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[bot]]

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.

[sugar-dr]

Tried approach from @martinlingstuyl - does not seem to work at all: onBeforeSubmit does not fire. Using SPFx 1.21.1 and 3.21.0 of @pnp/spfx-controls-react. Disabling required for the fields seems to have no effect either. Stopped working post upgrade from SPFx 1.17.14 and 3.14 correspondingly.

[martinlingstuyl]

Could you share something of the code? If required is not the issue here it would seem to be something else entirely.

[sugar-dr]

Sure thing: function renderSiteNameField(fieldProperties: IDynamicFieldProps): React.ReactElement<IDynamicFieldProps> { ... return <> <div className={styles.fieldWrapper}> <TextField label={"Site Name"} //{fieldProperties.fieldTitle} onRenderLabel={(p:ITextFieldProps, dr:IRenderFunction<ITextFieldProps>) => labelRenderer(p, dr, "TextField")} defaultValue={fieldProperties.defaultValue} onChange={(ev, newValue:string) => onChangeSiteNameField(fieldProperties, newValue)} //required={true}//{fieldProperties.required} //disabled={fieldProperties.disabled} placeholder={fieldProperties.placeholder} autoComplete="off" />....

function onChangeSiteNameField(fieldProperties: IDynamicFieldProps, newValue: string): void { ...

//fieldProperties.newValue = newValue;
fieldProperties.onChanged?.(fieldProperties.columnInternalName,newValue,true);

Please note: list column (Site Name) was made NOT required in the list too

[martinlingstuyl]

Are you getting any exceptions in the console?

And is the . in fieldProperties.onChanged?.(fieldProperties.columnInternalName,newValue,true); a typo?

I'd expect fieldProperties.onChanged(fieldProperties.columnInternalName,newValue,true);