formState.isSubmitting stays true when the fetcher's submitting and idle states land in one render

Abierto Apto para principiantes
  • ¿Algo no está bien?
#188 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Empieza por la implementación de useRemixForm y localiza el efecto que restablece isSubmittingNetwork cuando isSubmittingForm es false. Reproduce el problema con una action rápida y un formulario fetcher usando createRoutesStub; el issue incluye el cambio de dependencias propuesto. El trabajo está terminado cuando formState.isSubmitting se restablece después de la respuesta, incluso si contiene errores, y el botón de envío vuelve a habilitarse.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

useRemixForm sets isSubmittingNetwork to true in onSubmit and only clears it in an effect that depends on [isSubmittingForm]. When the action responds quickly, React Router can apply the fetcher's submitting and idle states in a single render. isSubmittingForm then stays false the whole time, the effect never re-runs, and formState.isSubmitting stays true until the component remounts. The form's submit button stays disabled after the response, including when the response has errors.

Reproduction: a route whose action returns immediately (for example () => ({ errors: { root: { message: 'Save failed' } } })) and a fetcher form whose button uses disabled={formState.isSubmitting}. Rendered with createRoutesStub in a unit test, it reproduces every time: the error shows, but the button never re-enables. In the browser it happens when the response arrives before React renders the submitting state, which we saw with a busy main thread.

Fix we're using as a patch: also reset when new data arrives:

useEffect(() => {
  if (!isSubmittingForm) {
    setIsSubmittingNetwork(false);
  }
}, [isSubmittingForm, data]);

Seen on 7.2.1. 7.3.0 and main have the same effect.

Lenguaje dominante
TypeScript
Estrellas
454
Forks
44
Sin PR fusionados en 30 d

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de code-forge-io/remix-hook-form

Todos los issues de code-forge-io/remix-hook-form

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.