`ctx.setFieldValue()` not updating `ctx.formValues`

🆘 Support
1

Hello! We are trying to make a plugin to add custom validation on some of our form fields. We have a Next app and we are using datocms-plugin-sdk and datocms-react-ui on NPM. We’ve set up a SelectField with isMulti set to true. This is for a Links field.

The problem is that ctx.setFieldValue() is not updating ctx.formValues and so our field UI isn’t updating with the new values that we add. When we log ctx after calling ctx.setFieldValue() it always has the initial value of null. This is for a new record. Here is a snipper of our code for what we are doing with the field:

function RegionEditor({ ctx }: { ctx: RenderFieldExtensionCtx }) {
  return (
    <Canvas ctx={ctx}>
      <SelectField
        name="regionEditor"
        id={ctx.field.id}
        label=""
        value={path(ctx.fieldPath.split('.'), ctx.formValues)}
        selectInputProps={{
          isMulti: true,
          options: [
            { label: 'United States', value: '55342433' },
            { label: 'United Kingdom', value: '55342472' },
            { label: 'Germany', value: '55342474' },
          ],
        }}
        onChange={async (newValue, actionMeta) => {
          await ctx.setFieldValue(ctx.fieldPath, newValue.map(({ value }) => value));
          console.log('updated ctx', ctx.formValues);
        }}
      />
    </Canvas>
  );
}
2

Hello @lluis

Just so we can understand the issue a bit better, the ctx.setFieldValue does update the value in the dashboard, but the ctx.formValues is not updated? Or does the value also does not change in the dashboard as well?

3

Hello @m.finamor, thanks for your reply!

The ctx.setFieldValue does update the value if I hit the save button, but the ctx.formValues is not updated and so, the UI on our custom SelectField is also not updated.

4

Hey @lluis

Could you send us the plugin repository URL to us at support@datocms.com so we can take a look and reproduce the error directly on your plugin?

Thank you!