createRef type for FormControl

[hamanovich]

I'm using react-bootstrap together with typescript.
What's the proper type in createRef for <Form.Control> element? (instead of any)

private textInput = createRef<any>();

<Form.Control name='textarea_name' as="textarea" ref={this.textInput} />

Once I replace to anything else e.g. , I always see the error in a console like so:
The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Form<"input">> & Readonly<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>> & Readonly<{ children?: ReactNode; }>...

[taion]

It's whatever the as component is (in this case <textarea>) – though I'm not sure our types are set up quite correctly.

[benkaiser]

Yeah there's definitely an issue with the types for Form.Control

[kbsanders]

Ran into the same issue.

Until it's fixed, I have found that you can do the following to at least allow your RefObject to maintain a type for usage in the component class:

private textInput = React.createRef<HTMLTextAreaElement>();

<Form.Control name='textarea_name' as="textarea" ref={this.textInput as React.RefObject<any>} />

Note the cast to RefObject<any> inside the ref prop assignment.

[dennis-8]

This worked for me:

    private commentRef = React.createRef<
        FormControl<"textarea"> & HTMLTextAreaElement
    >();


    public componentDidMount() {
        if (this.commentRef.current) {
            this.commentRef.current.focus();
        }
    }

Also had to change rows in Form.Component as='textarea' from string to number.

[dennis-8]

Does anyone know if innerRef is working?

https://github.com/react-bootstrap/react-bootstrap/blob/master/types/simple.test.tsx#L211

When I'm usin innerRef I get this error:

React does not recognize the innerRef prop on a DOM element

[Aaronik]

@Denis-N, how did you import that FormControl type from

private commentRef = React.createRef<
        FormControl<"textarea"> & HTMLTextAreaElement
    >();

??

I think if I had that I'd be able to type this correctly, but I can't find where that's exported.

[onichandame]

@Denis-N, how did you import that FormControl type from

private commentRef = React.createRef<
        FormControl<"textarea"> & HTMLTextAreaElement
    >();

??

I think if I had that I'd be able to type this correctly, but I can't find where that's exported.

I used import FormControl from 'react-bootstrap/FormControl' to import the type FormControl. @Denis-N 's solution works for me.

FYI, the version of react-bootstrap I am using is 4.4.1

[avxkim]

Doesn't work with useRef:

const inputLogin = useRef<HTMLInputElement>(null);

And markup:

<Form.Control
  type="text"
  name="login"
  ref={inputLogin as any}
/>

As workaround.

[onichandame]

@webcoderkz please try const inputLogin = useRef<HTMLInputElement & FormControl>(null); and JSX <Form.Control ref={inputLogin}/>

[avxkim]

@onichandame thanks, it does work. I think react-bootstrap should have some kind of README or guidance on how to type refs with TS.

[dennis-8]

In latest release the FormControl has changed.

My solution may not work now.

[AHorak]

@Denis-N have you found a new way?
you wrote:

My solution may not work now.

React.forwardRef<FormControl<ElementType<any>>
this doesn't work any more

[taion]

consolidating discussion in #5187

[dennis-8]

@Denis-N have you found a new way?
you wrote:

My solution may not work now.

React.forwardRef<FormControl<ElementType<any>>
this doesn't work any more

Sorry for long wait. Returned to the project today. This works for me now:

private commentRef = React.createRef<
        HTMLTextAreaElement & FormControl<any>
    >();

[dennis-8]

Wait, my new solution doesn't work today.

This one works:

private commentRef = React.createRef<
        HTMLTextAreaElement & BsPrefixRefForwardingComponent<"textarea", any>
    >();