TextField loses focus after inserting one character

Question

I have the following functions which display either a TextField or a Select component based on a JSON value being either Text or Select. When I try to type into a TextField, I can only enter one letter before focus is lost on the TextField. I can then click the TextField again and enter another letter before focus is lost again. There is also a noticeable delay between pressing a key and the corresponding symbol appearing in the TextField.

The complete code can be found here

This is my code of how I get my API response, useEffect, and my TextDetails function which displays the TextFields

    const fetchDetails = async () => {
        setBusy(true);
        setDetails(await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details`).then((response) => response.json()));
        setBusy(false);
    };

    useEffect(() => {
        fetchDetails();
    }, []);

    const TextDetails = ({ head, val, i }) => {
        return (
            <TextField
                value={val || ""}
                onChange={(e) => {
                    setDetails((prev) => {
                        const update = [...prev.fields];
                        update[i] = {
                            ...update[i],
                            Value: e.target.value,
                        };
                        return { ...prev, fields: update };
                    });
                }}
                variant="outlined"
                margin="normal"
                label={head}
            />
        );
    };  
    
    const detailsComps = details["fields"]?.map((row, i) => {
        return row["FieldType"] === "Text" ||
            row["FieldType"] === "Decimal" ||
            row["FieldType"] === "Number" ||
            row["FieldType"] === "Date" ? (
            <TextDetails head={row?.FieldName} val={row?.Value} i={i} />
        ) : (
            <SelectDetails head={row.FieldName} val={row?.Value} choices={row?.Choices} i={i} />
        );
    });

...

return (
    <Box>
        {detailsComps}
    </Box>
)

Answer 1

Sorry can't see the whole code. But please check whether the whole From is re-rendered every time you enter a value in the field. The reason could be that with setDetails you signalise React that details value has changed and because detailsComps renders from details it is highly likely the from is re-rendered. Hence, focused is lost.

Answer 2

I fixed this issue by moving this functionality into the functions return statement:

...
return (
  <Box>
  {details["fields"]?.map((row, index) => {
    if (row?.FieldType === "Text" || row?.FieldType === "Decimal" || row?.FieldType === "Number") {
      return (
        <TextField
          className="text-field"
          value={row?.Value || ""}
          onChange={(e) => {
            setDetails((prev) => {
              const update = [...prev.fields];
                update[index] = {
                  ...update[index],
                  Value: e.target.value,
                };
              return { ...prev, fields: update };
            });
          }}
          label={row["FieldName"]}
        />
      );
    }
    if (row?.FieldType === "Date") {
      return (
        <TextField
          type="date"
          label={row["FieldName"]}
          InputLabelProps={{
            shrink: true,
          }}
        />
      );
    } else {
      return (
        <TextField
          value={row?.Value || ""}
          onChange={(e) => {
            setDetails((prev) => {
             const update = [...prev.fields];
                update[index] = {
                  ...update[index],
                  Value: e.target.value,
                };
              return { ...prev, fields: update };
            });
          }}
          select
          label={row?.FieldName}
        >
          {row?.Choices.map((choice) => (
            <MenuItem key={choice} value={choice}>
              {choice}
            </MenuItem>
          ))}
        </TextField>
      );
    }
  })}
 </Box>

)