Skip to content

Live validation / onChange errors issue #4249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
4 tasks done
AlimovSV opened this issue Jul 10, 2024 · 6 comments · Fixed by #4432
Closed
4 tasks done

Live validation / onChange errors issue #4249

AlimovSV opened this issue Jul 10, 2024 · 6 comments · Fixed by #4432
Labels
bug help wanted if-then-else Issues related to handling JSON Schema if/then/else validation

Comments

@AlimovSV
Copy link
Contributor

Prerequisites

What theme are you using?

core

Version

5.x

Current Behavior

when schema contains if/then/else and a user's changes activates then/else subschemas, the live validation works but errors in the onChange event are not reflect the real ones

Expected Behavior

errors in the onChange event should always reflect the form state

Steps To Reproduce

Thus, open the repo https://github.com/AlimovSV/rjsf-onchange-issue and click checkbox, you will see error message in the UI but console.log in the onChange event handler displays empty array:

Next uncheck the checkbox you will see that form becomes valid but console log displays errors from the previous form state:

Environment

- OS:
- Node:
- npm:

Anything else?

No response

@AlimovSV AlimovSV added bug needs triage Initial label given, to be assigned correct labels and assigned labels Jul 10, 2024
@AlimovSV
Copy link
Contributor Author

Just another addition: when the schema is nested - all work fine.

@nickgros
Copy link
Contributor

nickgros commented Jul 12, 2024

This reproduces in this playground link (Playground.tsx needs to be updated to log the errors onChange)

@AlimovSV What's the nested schema that seems to work for you? I see the same issue if I wrap the if & then schemas in an "allOf": [{ ... }]

Also interesting is that the text field in the same example does not have this issue

@nickgros nickgros added help wanted validation if-then-else Issues related to handling JSON Schema if/then/else and removed needs triage Initial label given, to be assigned correct labels and assigned labels Jul 12, 2024
@AlimovSV
Copy link
Contributor Author

@nickgros The workable schema is

{
  "type": "object",
  "properties": {
    "root": {
      "type": "object",
      "required": [
        "checkbox"
      ],
      "properties": {
        "checkbox": {
          "type": "boolean"
        }
      },
      "if": {
        "required": [
          "checkbox"
        ],
        "properties": {
          "checkbox": {
            "const": true
          }
        }
      },
      "then": {
        "required": [
          "text"
        ],
        "properties": {
          "text": {
            "type": "string"
          }
        }
      }
    }
  }
}

@AlimovSV
Copy link
Contributor Author

AlimovSV commented Jul 30, 2024

I guess the problem is in this line: https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/core/src/components/Form.tsx#L617 - the form validation is proceeding with the old retrieved schema, that will be updated on the next render and we observe "delay" for one user's change. So the changes works for me:

    this.onChange = (formData, newErrorSchema, id) => {
      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
[-]   const { schemaUtils, schema, retrievedSchema } = this.state;
[+]   const { schemaUtils, schema } = this.state;
[+]   let retrievedSchema;
      if ((0, import_utils39.isObject)(formData) || Array.isArray(formData)) {
[-]     const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
[+]     const newState = this.getStateFromProps(this.props, formData);
        formData = newState.formData;
[+]     retrievedSchema = newState.retrievedSchema;
      }

I'm not sure about how these changes will affect the performance, because we retrieve the schema on every form change. @nickgros thoughts?

@AlimovSV
Copy link
Contributor Author

Also I concern about calling getStateFromProps inside the onChange. Looks like we do a validation twice, when liveValidation is on.

@AlimovSV
Copy link
Contributor Author

Any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug help wanted if-then-else Issues related to handling JSON Schema if/then/else validation
Projects
None yet
2 participants