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>
);
}