Ref is not defined on FormProp type

[jamazerto]

Description

The following documentation example produces an error when compiling with typescript :
https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/internals/#submit-form-programmatically

Steps to Reproduce

1. Copy the example from https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/internals/#submit-form-programmatically:

const onSubmit = ({formData}) => console.log("Data submitted: ",  formData);
let yourForm;

const schema = {
    type: "string"
};

render((
  <Form schema={schema}
        onSubmit={onSubmit} ref={(form) => {yourForm = form;}}/>
), document.getElementById("app"));

yourForm.submit();

Expected behavior

It should compile without problems

Actual behavior

When compiling with tsc

No overload matches this call.
  Overload 1 of 2, '(props: FormProps<any>, context?: any): ReactElement<any, any> | Component<FormProps<any>, any, any> | null', gave the following error.
    Type '{ children: Element; schema: JSONSchema7; liveValidate: true; noHtml5Validate: true; showErrorList: false; ref: (form: any) => void; onSubmit: (values: Record<string, any>)
e to type 'IntrinsicAttributes & FormProps<any>'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & FormProps<any>'.
  Overload 2 of 2, '(props: PropsWithChildren<FormProps<any>>, context?: any): ReactElement<any, any> | Component<FormProps<any>, any, any> | null', gave the following error.
    Type '{ children: Element; schema: JSONSchema7; liveValidate: true; noHtml5Validate: true; showErrorList: false; ref: (form: any) => void; onSubmit: (values: Record<string, any>)
e to type 'IntrinsicAttributes & FormProps<any> & { children?: ReactNode; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & FormProps<any> & { children?: ReactNode; }'.  TS2769

  > 47 |         ref={form => {
       |         ^
    48 |           yourForm = form;
    49 |         }}
    50 |         onSubmit={onSubmit}

Version

    "react": "^16.9.0",
    "typescript": "^3.8.3",
    "@rjsf/antd": "^2.4.0",
    "@rjsf/core": "^2.4.0",
    "@types/react": "^16.9.43",

[ievgennaida]

I have the same issue

[palenshus]

I was able to work around this for now by setting the id property on my Form, and then programmatically submitting with:

document.querySelector("#manifestForm") as any).requestSubmit()

[JoeryH]

Goes without saying, but the workaround is disabling ts for that line:

// @ts-ignore
ref={}

[epicfaace]

Anyone interested in modifying index.d.ts to submit a fix? 🙏

[mattcosta7]

I'm happy to work on the ts typings here, as it looks like there are a few that could be improved, but not entirely sure I can repro this as described

If anyone does have a repro, I'm happy to take a look. In my attempts to repro, I created these, which all appear to correctly work correctly?

https://codesandbox.io/s/brave-dan-6v243?file=/src/App.tsx

[mattcosta7]

Spent a little more time trying to recreate this error here

https://codesandbox.io/s/trusting-wave-1kue3?file=/src/App.tsx

and am unable to

@jamazerto @ievgennaida can either of you send a minimal repro I can take a look at to help debug?

[JoeryH]

Hi @mattcosta7, thanks for looking into this. I guess the author missed mentioning this, but we are using material-ui.
https://codesandbox.io/s/mystifying-cache-7jpqc?file=/src/App.tsx
Not sure if that works otherwise this is the main piece:

import Form from "@rjsf/material-ui";

[mattcosta7]

Ok, thanks for the clarification, I was using core, and not the withTheme hoc. Will look into it when I get some free time this week

…

On Mon, Mar 15, 2021, 07:52 Joery ***@***.***> wrote: Hi @mattcosta7 <https://github.com/mattcosta7>, thanks for looking into this. I guess the author missed mentioning this, but we are using material-ui. https://codesandbox.io/s/mystifying-cache-7jpqc?file=/src/App.tsx Not sure if that works otherwise this is the main piece: import Form from ***@***.***/material-ui"; — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2135 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACBXYASAXCIIMDDGFMHO36TTDXYIRANCNFSM4T3Q5SZQ> .

[mattcosta7]

Took a quick peek at that sandbox, and it looks on the surface that the issue comes from withTheme, which returns a withTheme(...): React.ComponentClass | React.StatelessComponent this should just return the React.ComponentClass (and these typings are inherited into material-ui, and I assume the other themes since this is in core). I'll try to get a test case that can repro this when I make a pr to update - but in the meantime, anyone experiencing this can make a .d.ts file with this change and it should work for you (i believe. although the imported themes might need a similar update - not sure offhand yet whether they import these type or re-define it in their .d.ts files)

…

On Mon, Mar 15, 2021 at 9:18 AM Matt ***@***.***> wrote: Ok, thanks for the clarification, I was using core, and not the withTheme hoc. Will look into it when I get some free time this week On Mon, Mar 15, 2021, 07:52 Joery ***@***.***> wrote: > Hi @mattcosta7 <https://github.com/mattcosta7>, thanks for looking into > this. I guess the author missed mentioning this, but we are using > material-ui. > https://codesandbox.io/s/mystifying-cache-7jpqc?file=/src/App.tsx > Not sure if that works otherwise this is the main piece: > > import Form from ***@***.***/material-ui"; > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#2135 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ACBXYASAXCIIMDDGFMHO36TTDXYIRANCNFSM4T3Q5SZQ> > . >

[mattcosta7]

All just wanted to add this is not the best fix here, and won't necessarily add the proper generics for form data, just a slightly better workaround than just ts-ignore / ts-expect-error comments

…

On Mon, Mar 15, 2021, 10:07 Matt ***@***.***> wrote: Took a quick peek at that sandbox, and it looks on the surface that the issue comes from withTheme, which returns a withTheme(...): React.ComponentClass | React.StatelessComponent this should just return the React.ComponentClass (and these typings are inherited into material-ui, and I assume the other themes since this is in core). I'll try to get a test case that can repro this when I make a pr to update - but in the meantime, anyone experiencing this can make a .d.ts file with this change and it should work for you (i believe. although the imported themes might need a similar update - not sure offhand yet whether they import these type or re-define it in their .d.ts files) On Mon, Mar 15, 2021 at 9:18 AM Matt ***@***.***> wrote: > Ok, thanks for the clarification, I was using core, and not the withTheme > hoc. > > Will look into it when I get some free time this week > > On Mon, Mar 15, 2021, 07:52 Joery ***@***.***> wrote: > >> Hi @mattcosta7 <https://github.com/mattcosta7>, thanks for looking into >> this. I guess the author missed mentioning this, but we are using >> material-ui. >> https://codesandbox.io/s/mystifying-cache-7jpqc?file=/src/App.tsx >> Not sure if that works otherwise this is the main piece: >> >> import Form from ***@***.***/material-ui"; >> >> — >> You are receiving this because you were mentioned. >> Reply to this email directly, view it on GitHub >> <#2135 (comment)>, >> or unsubscribe >> <https://github.com/notifications/unsubscribe-auth/ACBXYASAXCIIMDDGFMHO36TTDXYIRANCNFSM4T3Q5SZQ> >> . >> >

[mattcosta7]

@JoeryH thanks again for that repro and update.

Opened a PR for the typing updates here - feel free to make a similar change locally and report back if this works on your end as well.

// @rjsf/material-ui.   Form
import Form from '@rjsf/core'
const MuiForm: typeof Form = withTheme(them);

should make the ref (and the generic for formData) play much nicer

[ibrahimawadhamid]

@JoeryH thanks again for that repro and update.

Opened a PR for the typing updates here - feel free to make a similar change locally and report back if this works on your end as well.

// @rjsf/material-ui.   Form
import Form from '@rjsf/core'
const MuiForm: typeof Form = withTheme(them);

should make the ref (and the generic for formData) play much nicer

Is this going to be merged soon?

[heath-freenome]

Now that core has been converted to Typescript this should be fixed in the v5 beta

[cdolek]

Now that core has been converted to Typescript this should be fixed in the v5 beta

for themed forms, can not set ref using beta.13 - any workarounds for this?

... is not assignable to type 'IntrinsicAttributes & FormProps<any, any>'.
Property 'ref' does not exist on type 'IntrinsicAttributes & FormProps<any, any>