Custom widget access to form Data

[zzph]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

Inside my custom widget, it will not let me access the current formData. So I pass it into formContext but that breaks the form (nothing can be inputted).

Expected Behavior

Inside my custom widget, I can access all the current values of the form

Steps To Reproduce

1. Using react and rjsf (both on latest)
2. Using a custom widget (as implemented per docs)
3. I expect the formData to appear as a prop, but it does not, so I try passing it on formContext instead (as per issue here
4. Using that formContext freezes the entire form and nothing can be inputted.

I simplified my code as per below (CodeSandbox here):

import { useState } from 'react'
import Form from '@rjsf/core';
import validator from '@rjsf/validator-ajv8';

const TestCmp = (props) => {
  const { formContext } = props;
  // Use formData as needed
  // ...
  return <div> TEST {JSON.stringify(formContext)} </div>
};

const uiSchema = {
  name: {
    'ui:widget': 'TestCmp'
  }
};
const schema = {
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "age": {
      "type": "number"
    }
  }
}

const widgets = {
  TestCmp
};

export default function Create() {
  const [formDataPublic, setFormDataPublic ] = useState({})
  return <Form
        schema={schema}
        validator={validator}
        uiSchema={uiSchema}
        widgets={widgets}
        onChange={({formData})=> setFormDataPublic(formData)}
        formContext={{formDataPublic}}
      />
}

Environment

- OS: MacOS
- Node: 20.11
- npm: 10.2.4

Anything else?

No response

[zzph]

Any ideas on this? I'm blocked from using this awesome library because of it

[heath-freenome]

The widget has access to the formData at its current level (in your example the widget will get the value for name) via the value prop. Is there a reason why you need access to all of the formData within a single widget?

[zzph]

Thanks for the reply. In this case, the field would “auto suggest” a value based on other fields (which can also be corrected by the user if not correct). Is that clear? Is there a way to achieve it?

…

On Sat, 18 May 2024 at 5:38 am, Heath C ***@***.***> wrote: The widget has access to the formData at its current level (in your example the widget will get the value for name) via the value prop. Is there a reason why you need access to all of the formData within a single widget? — Reply to this email directly, view it on GitHub <#4192 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUBXB72LVJNDJYNTNXQCALLZCZMDNAVCNFSM6AAAAABHRPO5VGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYGI2TSMZUGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[heath-freenome]

@zzph I'm wondering if the "freezing" of the form you are seeing is a situation where your the state change causes a rerender infinite loop. Theoretically, you should be able to put anything into the formContext. Have you debugged why you things are freezing?

[zzph]

Yes I've debugged, and it does seem like you're saying- it re-renders the entire component everytime 'formContext' changes. So this is an issue.

Can you suggest a work around?

[heath-freenome]

Maybe you can process the formData on change in a way that you transform what you put into the formContext is only what you need to provide the auto-suggest? Meaning if your component looks at the value of age to auto-suggest the value of name (from your example), perhaps precompute the suggestion OUTSIDE of the component and pass in the suggestion rather than the formData in the formContext?

[hawkzey]

I have a similar issue to this, I am trying to access the value of a property inside of a widget for a different property.

I tried having a controlled state outside my form and the on change to update that, i could then pass this property thought like you suggest but this causes a re render loop :/ ( the onChange causes this).

@zzph did you make any progress on this?

[heath-freenome]

What if you use a React context to store the form data rather than formContext and access it specifically from your widget, via the useContext() hook?

[mateuszbaldyga]

In order to make it work you need to pass formData prop to a <Form /> component:

const [formData, setFormData] = useState({});

return (
  <Form
    // ... other props ...
    formData={formData}
    onChange={({ formData }) => {
      setFormData(formData);
    }}
    formContext={{ formData }}
  />
)