submit is not public

[popmanhe]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

4.2.3

Current Behavior

Submit form programmatically
You can use the reference to get your Form component and call the submit method to submit the form programmatically without a submit button. This method will dispatch the submit event of the form, and the function, that is passed to onSubmit props, will be called.

But actually, the submit method is private, and can not be called from outside.

Expected Behavior

Can be called from outside. Like in the sample, yourForm.submit();

Steps To Reproduce

No response

Environment

- OS:
- Node:
- npm:

Anything else?

The fix is pretty simple. Just make it the public method.

Change from

submit(){
...
}

to

submit=()=>{
...
}

The bug exists in 4.x and 5.x

[heath-freenome]

@popmanhe You just need to call it from the ref. See this documention

[popmanhe]

I did. But as shown in the screenshot, there is simply not submit method. Because it's not a public method. I am using react 17.0.2 and rjsf 4.2.3. Could you please take a look? Thanks.

[heath-freenome]

If you look at the playground code we are using the method just fine. Can you just try it?

[heath-freenome]

You are also welcome to submit a PR making the change you suggested.

[nickgros]

@popmanhe programmatic submit was not added until v5.0.0 (see changelog). Try migrating to v5

[popmanhe]

Yes, it works in v5. even if it's not a public method. I don't know why. You may not need this PR.

But according to this page, v4 also supports programmatic submit.
https://rjsf-team.github.io/react-jsonschema-form/docs/version-4.2.3/advanced-customization/internals

[nickgros]

Ah, I was mistaken. Programmatic submit was in v4, but there were issues that were fixed in v5. This comment describes a workaround to a similar-sounding issue. Maybe this would help you?

[codeinearts]

Leaving my two cents:

I was having issues with the programmatic submit when I got here in the first place.

Looking at the playground code @heath-freenome shared, I realized that the docs are incorrect, using createRef instead of useRef, which can cause issues across re-renders on functional components ( createRef always create a new reference )

Using the approach at the playground code works for me.

Discussion https://stackoverflow.com/a/54620836

[heath-freenome]

@codeinearts If you are using the Form inside of another stateless functional component, then, yes, the useRef hook is the correct approach. The docs are more of a stand-alone implementation. Feel free to push a PR that enhances the documentation with a component-based example as well