[New Feature] Implementing setFieldValue

[reabiliti]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

Hi folks, I didn't find ability to setup formData for multiple field. As I understand there is only ability to set current field. I would like to change formData with additional function which will take newFormData and path where I need to change data.
For example, I have object with fields:

{
  symptom: {
    title: "Condition",
    type: "object",
    required: [:id, :name],
    properties: {
      id: {
        type: "number",
        title: 'id'
      },
      name: {
        type: "string",
        title: 'name'
      }
    }
  }
}

And I've created my own widget, with will render select where I choose symptom, but value already includes id and name and I would like update symptom key with data { id: 1, name: 'Name' }

const SymptomWidget = props => {
  const onChangeSymptom = symptom => {
    const parsedSymptom = symptom ? JSON.parse(symptom) : null
    const id = pathOr('', ['0'], parsedSymptom)
    const name = pathOr('', ['1'], parsedSymptom)
    props.onChange({ id, name })
  }
  return <ConditionSelect onChange={onChangeSymptom} />
}

But I get this result: { symptom: id: { id: 1, name: 'Name' } }.

Version

2.4

[maulik-modi]

Formik has this method: https://formik.org/docs/api/formik

Looks like until this is added, Formik is the way to go.
@reabiliti , do you see any issue?

[reabiliti]

Hey @maulik-modi, thanks for the way to use it, will check, but we didn't use formik on our project.

[heath-freenome]

This may be fixed by creating a custom widget/field and then calling the onChange() function a second time. This didn't work properly until this PR was merged

[TheOneTheOnlyJJ]

This may be fixed by creating a custom widget/field and then calling the onChange() function a second time. This didn't work properly until this PR was merged

If #3367 gets fixed, would it be possible to add a new setFieldValue API to the library, similar to Formik's, abstracting away the custom widget workaround?

[heath-freenome]

@TheOneTheOnlyJJ Where would you expect it to exist?

[TheOneTheOnlyJJ]

@TheOneTheOnlyJJ Where would you expect it to exist?

I was thinking it would have utility on the form ref.

I looked at my project to get a concrete example of its potential benefits, but I was actually working with custom errors, not the form data itself. So, I do not have a concrete example to link to.

[heath-freenome]

@TheOneTheOnlyJJ So in effect you'd want the setFieldValue() to call the onChange() handler on the Form, straight-up with no additional changes to the signature...

  setFieldValue = (newValue: T, path: string[], es: ErrorSchema) => {
    this.onChange(newValue, path, es);
  }

[TheOneTheOnlyJJ]

@TheOneTheOnlyJJ So in effect you'd want the setFieldValue() to call the onChange() handler on the Form, straight-up with no additional changes to the signature...

Not quite, because I was imagining setFieldValue would take a field: string parameter. It would be more like accessing the onChange handler of any JSON schema field from any custom UI widget.

For example, for a JSON schema with whatever 2 fields, fieldA and fieldB, I could have a custom widget for fieldB that could call setFieldValue("fieldA", newValue) to forcefully set another value for fieldA from this custom widget of fieldB.
I could use this to set values of other fields to undefined or null based on different conditions. Right now, how I do this is by setting the entire formData to undefined, but this could be enhanced by targeting just the specific field that should be reset, leaving the other data intact.

However, I am not sure of what the path: string[] parameter of the onChange function does. If it serves as the target field to be updated (multiple target fields, because it is a list?), then this new setFieldValue function is indeed redundant. I have not had the time to test this on my project yet.

[heath-freenome]

@TheOneTheOnlyJJ The path array represents the list of hierarchical field names used to set the value of the field within the formData. Essentially it is the second parameter of the lodash set function. Because the pathSeparator could be anything in @rjsf (and defaults to _), this is a way of representing the location of the field in the formData consistently. Given your desire, we could do something like this on Form. If you look at the source, we in fact use set(formData, path, newValue) when the path is not the root, empty array or ['']

setFieldValue = (dottedPath: string, newValue: T, es?: ErrorSchema) => {
  const path = dottedPath.split('.');
  this.onChange(newValue, path, es);
}

[heath-freenome]

@TheOneTheOnlyJJ Any feedback on my last post?