What Typescript type to require for useRef in AsyncSelect

[jjmwhite]

This is specifically a question about using react-select with Typescript, and I'm pretty new to both. All suggestions are appreciated!

For reference, I'm using these packages:

"react-select": "^4.3.1", 
"@types/react-select": "^4.0.15",

I'm trying to pass a ref to my AsyncSelect so I can later call .focus() on it as seen in the Accessing Internals section of the docs, but am having trouble initializing the ref to match Typescript expectations.

If I don't type the ref when initializing, I get Object is possibly null when attempting to focus.

const SearchBar = (props: Props): JSX.Element => {
    const ref = useRef(null);
...
return (
<SearchForm>
    <AsyncSelect 
        {...all my options here}
        ref={ref}
    />
    <ClearSearchButton
        aria-label="Clear Ratings Search"
        type="button"
        onClick={() => {
            clearSearchInput();
            if (ref.current) {
                ref.current.focus();  \\ `Object is possibly null`
            }
         }}
    />
</SearchForm>

If I try to initialize the ref with a type of AsyncSelect, it requires I specify my custom option type, but doing so throws an error, like it's expecting me to instantiate the selector right then:

const SearchBar = (props: Props): JSX.Element => {
    const ref = useRef<AsyncSelect<SelectOption>(null); // `Value of type 'typeof Async' is not callable. Did you mean to include 'new'?`
...
return (
<SearchForm>
    <AsyncSelect 
        {...all my options here}
        ref={ref}
    />
    <ClearSearchButton
        aria-label="Clear Ratings Search"
        type="button"
        onClick={() => {
            clearSearchInput();
            if (ref.current) {
                ref.current.focus();  \\ `Property 'current' does not exist on type 'boolean'.`
            }
         }}
    />
</SearchForm>

I did some digging through the node package for react-select trying to figure out where I'm going wrong. Our TS config doesn't allow any, and I've been at a loss to find examples on SO or elsewhere that address my use case. Has anyone else run up against something similar who can point out where I'm going wrong?

[Methuselah96]

Typing it this way works for me:

import { useRef } from "react";
import AsyncSelect from "react-select/async";

interface Option {}

export default function App() {
  const asyncRef = useRef<AsyncSelect<Option> | null>(null);

  return (
    <>
      <AsyncSelect<Option> ref={asyncRef} />
      <button
        onClick={() => {
          if (asyncRef.current) {
            asyncRef.current.focus();
          }
        }}
      >
        Focus
      </button>
    </>
  );
}

CodeSandbox

[Joe312341]

This doesn't work for v5. Im getting Type 'StateManagedSelect' is not generic.ts(2315)...looks like the Select definition was changed.

Updated sandbox: https://codesandbox.io/s/beautiful-easley-qyg75?file=/src/App.tsx

Anyone know how to fix this?

[Methuselah96]

We now export a SelectInstance type for this purpose:

- import Select from "react-select";
+ import Select, { SelectInstance } from "react-select";

- const asyncRef = useRef<Select<Option> | null>(null);
+ const asyncRef = useRef<SelectInstance<Option> | null>(null);

CodeSandbox

[sim51]

With SelectInstance it works for most cases, but not when you need to access the async state, like reading isLoading.

[Methuselah96]

I don't think what you're suggesting is currently possible since the AsyncSelect component is not written in a way where the user could access that state since it uses a hook that manages state like isLoading.

[PranuPranav97]

SelectInstance Worked for me.

[ahmad118128]

you can use this with useRef:

  // Function to focus the select element
  const openSelect = () => {
    if (selectRef.current) {
      selectRef.current.showPicker;
    }
  };
  
  
  
      <div>
          <button type="button" onClick={openSelect}>
            Open Select
          </button>
          <select ref={selectRef} id="myCheck">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
          </select>
        </div>