react-bootstrap-typeahead TypeScript- Ref - getInstance does not exist

Question

Im using react-bootstrap-typeahead typescript, added types from @types/react-bootstrap-typeahead

In my typeahead from react functional component, I'm trying to access the typeahead ref and call the public methods of the component, as given here

import { Typeahead } from 'react-bootstrap-typeahead';

const typeahead = React.createRef();

<Typeahead
ref={(ref) => typeahead = ref}
id="basic-typeahead-single"
filterBy={['dialCode', 'name']}
inputProps={{
    className: 'attrib',
}}
labelKey={(option: any) => `${option.name}`}
onChange={(selected: any) => {
    console.log(selected);
}}
renderMenuItemChildren={(option) => (
    <div>
        <div>{option.name}   {option.section}</div>
    </div>
)}
options={employeeList}
selected={state.internationalization}>
</Typeahead>
<span className="arrow" onClick={() => {
    const instance = typeahead.getInstance();
    console.log("instance", instance);
    instance.clear();
    instance.focus();
}}><img src="/arrow.svg" /></span> 

It throws error - Property 'getInstance' does not exist on type 'RefObject'

so while creating ref I tried: const typeahead = React.createRef<Typeahead>(); But it seems something is missing for typescript

Answer 1

The variable typeahead which you created from createRef is a RefObject with a property current that references your component.

When you create the ref, you need to specify the component type with the generic. As you saw, the Typeahead class is itself generic, but the generic type doesn't matter for what you are trying to do, so you can use any to say that it is a ref to a Typeahead component with any type of data.

const typeahead = React.createRef<Typeahead<any>>();

Since we are using the new createRef syntax instead of the older callback refs, when you pass the ref to the component you just pass the whole ref object.

<Typeahead ref={typeahead} ... />

To access the instance, you look at the .current property of the ref, which is either null or Typeahead<any> .

const instance = typeahead.current;

But as for calling the methods, you are still going to get an error. For whatever reason, these public methods which exist on the class are not documented in the type definitions , so typescript doesn't know about them.

You may want to bring this up with any of the type maintainers or edit the @types/react-bootstrap-typeahead package yourself, as it seems to be an oversight.

But you can also expand the types with your own.

declare module "react-bootstrap-typeahead" {
    interface Typeahead<T extends TypeaheadModel> extends React.Component<TypeaheadProps<T>> {
        clear(): void;
        focus(): void;
    }
}

You need to make sure that typeahead is not null before calling any methods. The most concise way is with the optional chaining ?.

const instance = typeahead.current;
instance?.clear();
instance?.focus();

Typescript Playground Link