We are using JsonForms with React and MUI. There is a specific renderer (CEP renderer equivalent to ZIP code) which, onBlur, performs an API call and it should update the values of other fields from the same form. These other fields are a different renderer.
This is a simplified implementation of the CEP renderer:
export const cepRender = {
tester: cepRenderTester,
renderer: withJsonFormsControlProps((props) => {
const handleChange = async (event: FocusEvent<HTMLInputElement>) => {
const cep = event?.target?.value;
props.handleChange(props?.path, cep);
if (cep?.replace?.(/\D/g, '')?.length === 8) {
const response = await client.get(`https://viacep.com.br/ws/${cep}/json/`);
const { logradouro, bairro, localidade, uf } = response.data;
props.handleChange('endereco.logradouro', logradouro || '');
props.handleChange('endereco.bairro', bairro || '');
props.handleChange('endereco.municipio', localidade || '');
props.handleChange('endereco.estado', uf || '');
}
};
return (
<div className='custom-input-container' ref={fieldRef}>
<TextField
{...props}
variant='filled'
className="input"
required={props.required}
defaultValue={props?.data ?? ''}
inputRef={
props?.uischema?.options?.mask ? withMask(props.uischema.options.mask) : undefined
}
onBlur={handleChange}
InputProps={{ disableUnderline: true } as Partial<OutlinedInputProps>}
/>
</div>
);
}),
}
The problem is that the other fields are not being set. Before refactoring it to use MUI the handleChange actually worked. But for styling reasons and following the same pattern we started using MUI.
The rendering part of the other renderer is very similar to the simplified implementation I already provided. If necessary I can include it as well.
EDIT
After a long time of debugging, I managed to make it work. I had to edit the other renderers, which were using the defaultValue prop, and use the value prop instead.
The props.handleChange() altered the value but it was never checked by MUI's textfield.
After a long time of debugging, I managed to make it work. I had to edit the other renderers, which were using the defaultValue
prop, and use the value
prop instead.
The props.handleChange()
altered the value but it was never checked by MUI's textfield.