Estoy usando React con MUI y Formik para crear un formulario, pero después de escribir un carácter en el campo de entrada, pierde el foco. De hecho, envuelvo cada campo de entrada en un componente para que pueda reutilizarse muchas veces como un código más limpio. Pero resulta que pierde el foco cada vez que se vuelve a renderizar onchange.
Lo que he hecho hasta ahora:
Aquí está mi código de demostración en vivo: https://codesandbox.io/s/condescending-resonance-5r5nv?file=/src/Form.js
Cualquier pista es muy apreciada. Gracias por adelantado.
import { Form, FormikProvider, useFormik, FieldArray } from "formik"; import { TextField, Button, Stack } from "@mui/material"; import uuid from "react-uuid"; export default function FormComponent() { const formik = useFormik({ enableReinitialize: false, initialValues: { name: "Jordan Spikes", description: "Just a regular dude", state: "Alabama", country: "USA" } }); const { handleSubmit, getFieldProps } = formik; const FieldStack = (props) => ( <Stack key={uuid()} direction={{ xs: "column", md: "row" }} sx={{ mb: 3 }} spacing={2} > <TextField fullWidth label={props.name} {...getFieldProps(`${props.data}`)} /> </Stack> ); return ( <FormikProvider value={formik}> <Form autoComplete="off" noValidate onSubmit={handleSubmit}> <h3>Form</h3> <FieldStack name="Name" data="name" /> <FieldStack name="Description" data="description" /> <FieldStack name="State" data="state" /> <FieldStack name="Country" data="country" /> </Form> </FormikProvider> ); }
Use una variable clave estable en el elemento Stack. No se debe cambiar en cada render.
<Stack key={**use array index or any other stable variable**} direction={{ xs: "column", md: "row" }} sx={{ mb: 3 }} spacing={2} > <TextField fullWidth label={props.name} {...getFieldProps(`${props.data}`)} /> </Stack>