Skip to content
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

Changes to extraErrors prop are not reflected in Form state. #4408

Open
4 tasks done
studiosciences opened this issue Dec 4, 2024 · 3 comments
Open
4 tasks done

Changes to extraErrors prop are not reflected in Form state. #4408

studiosciences opened this issue Dec 4, 2024 · 3 comments
Labels
awaiting response bootstrap-4 bootstrap-4 related theme issue bug

Comments

@studiosciences
Copy link

Prerequisites

What theme are you using?

core

Version

5.x

Current Behavior

When liveValidation is enabled, the extraErrors prop can only add errors, not clear or change them. It only clears previous extraErrors from state onSubmit().

Expected Behavior

Changing extraErrors prop immediately updates the UI.

This is necessary for cases such as:

  • live validation of unique key requirements, such as username availability.
  • RJSF is a part of larger form (onSubmit is not called within RJSF's Form component).

Steps To Reproduce

Repo:

  1. Go to Sandbox: https://codesandbox.io/p/sandbox/new-sky-82rvdl
  2. Click "Set Extra Error"
  3. Click "Clear Extra Error"

Observe: Extra error remains displayed.
Expected: Extra error disappears.

Also:

  1. Click "Set Extra Error"
  2. Click "Clear Extra Error"
  3. Repeat

Observe: Extra error is duplicated in each cycle
Expected: Extra error disappears.

Environment

No response

Anything else?

When deriving state from props, extraErrors is merged into the existing state that already includes the extra error.
https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/core/src/components/Form.tsx#L462-L466

I'm open to making a PR, but I'm not clear on what other errors RJSF may have set in the errorSchema (required fields?) or how to separate the two.

@studiosciences studiosciences added bug needs triage Initial label given, to be assigned correct labels and assigned labels Dec 4, 2024
@studiosciences
Copy link
Author

I found a workaround. When extraErrors changes, it's possible to call validateForm() directly.

  const ref = useRef<FormType<any, MySchema, any>>(null);
  
  useEffect(() => {
    ref.current?.validateForm();
  }, [extraErrors]);

  return (
    <Form
      ref={ref}
      {...otherProps}
    />

@heath-freenome heath-freenome added bootstrap-4 bootstrap-4 related theme issue and removed needs triage Initial label given, to be assigned correct labels and assigned labels Dec 6, 2024
@heath-freenome
Copy link
Member

@studiosciences Since you have a work-around, is it ok to close the issue?

@studiosciences
Copy link
Author

@heath-freenome It's still a bug, so it's up to you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting response bootstrap-4 bootstrap-4 related theme issue bug
Projects
None yet
Development

No branches or pull requests

2 participants