rjsf-team/react-jsonschema-form

Programmatic validation breaks form state

Open

Aperta il 16 apr 2026

Vedi su GitHub
 (2 commenti) (0 reazioni) (2 assegnatari)TypeScript (13.175 star) (2136 fork)batch import
bugcorehelp wanted

Descrizione

Prerequisites

What theme are you using?

core

Version

6.4.2

Current Behavior

List of errors contains stale entries

Expected Behavior

List of errors contains correct entries for the formData and schema provided

Steps To Reproduce

  1. Trigger programmatic validation in an effect.
  2. Attempt to update form props.

Environment

Anything else?

import Form from '@rjsf/core'
import type { RJSFSchema } from '@rjsf/utils'
import validator from '@rjsf/validator-ajv8'
import { useCallback, useEffect, useRef, useState } from 'react'

const schemaA: RJSFSchema = { type: 'string', minLength: 10 }

const schemaB: RJSFSchema = { type: 'string', minLength: 20 }

const Example0 = () => {
  const [schema, setSchema] = useState(schemaA)

  const handleClick = useCallback(() => {
    setSchema((prev) => (prev === schemaA ? schemaB : schemaA))
  }, [])

  const ref = useRef<Form>(null)

  // https://rjsf-team.github.io/react-jsonschema-form/docs/usage/validation/#validate-form-programmatically
  useEffect(() => {
    // breaks form state
    ref.current?.validateForm()

    // a hack
    // const timeout = setTimeout(() => ref.current?.validateForm(), 0)
    // return () => clearTimeout(timeout)
  }, [schema])

  return (
    <>
      <Form formData="formData" ref={ref} schema={schema} validator={validator} />
      <button onClick={handleClick}>Toggle Schema</button>
      <p>
        Schema: <output>{JSON.stringify(schema)}</output>
      </p>
    </>
  )
}

Example 0 demo:

https://github.com/user-attachments/assets/a6df97f8-a902-4cdb-8bff-62288abe7898


import Form from '@rjsf/core'
import type { RJSFSchema } from '@rjsf/utils'
import validator from '@rjsf/validator-ajv8'
import { useCallback, useEffect, useRef, useState } from 'react'

const schema: RJSFSchema = { type: 'string', maxLength: 11, minLength: 8 }

const valueA = 'invalid'

const valueB = 'also invalid'

const Example1 = () => {
  const [formData, setFormData] = useState(valueA)

  const handleClick = useCallback(() => {
    setFormData((prev) => (prev === valueA ? valueB : valueA))
  }, [])

  const ref = useRef<Form>(null)

  // https://rjsf-team.github.io/react-jsonschema-form/docs/usage/validation/#validate-form-programmatically
  useEffect(() => {
    // breaks form state
    ref.current?.validateForm()

    // a hack
    // const timeout = setTimeout(() => ref.current?.validateForm(), 0)
    // return () => clearTimeout(timeout)
  }, [])

  return (
    <>
      <Form formData={formData} ref={ref} schema={schema} validator={validator} />
      <button onClick={handleClick}>Toggle Data</button>
      <p>
        Data: <output>{JSON.stringify(formData)}</output>
      </p>
    </>
  )
}

Guida contributor