Change value of renderers using MUI's TextField

General
1

Hey all, I’m trying to change the value of some specific renderers based on the value of another.

For example, there is an input field for the Zip Code. When that input is filled, we perform a request to an API which returns the city, street, etc. I want to change the values of these other inputs with the values returned from the API call.

The problem is, all the renderers use the TextField component. We had it working using the basic input. But due to requirements we had to change it to TextField.

After this change, the update of the other inputs stopped working. Is there a way of making it work with MUI’s components?

This is the current implementation we have, it resides within the withJsonFormsControlProps((props) => {}

const handleChange = async (event: FocusEvent<HTMLInputElement>) => {
      const zipCode = event?.target?.value;
      props.handleChange(props?.path, zipCode);

      if (zipCode?.replace?.(/\D/g, '')?.length === 8) {
        const response = await client.get(`${apiUrl}${zipCode}/json);
        const { street, neighborhood, city, state } = response.data;
        props.handleChange('address.street', street || '');
        props.handleChange('address.neighborhood', neighborhood || '');
        props.handleChange('address.city', city || '');
        props.handleChange('address.state', state || '');
      }
    };

Any help is appreciated!!

2

After 2 days of research I was finally able to find the issue myself. Turns out we were defining the defaultValue of the TextField. However, it did not update with the handleChange.

If we switch to using value={props?.data} it works.