0

A bit lost here, I am getting the following error on the ref prop of the autocomplete component. Anyone got any idea ? I don't understand why I can't just use a react useRef on this component ?

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): Autocomplete', gave the following error.
    Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<Autocomplete> | undefined'.
      Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<Autocomplete>'.
        Types of property 'current' are incompatible.
          Type 'undefined' is not assignable to type 'Autocomplete | null'.
  Overload 2 of 2, '(props: Props, context: any): Autocomplete', gave the following error.
    Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<Autocomplete> | undefined'.ts(2769)

The code :

  const Search = () => {
  const [searchValue, setSearchValue] = useState('');
  const [isOpened, setIsOpened] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const handleButtonOnClick = () => {
    setSearchValue('');
    setIsOpened(false);
    inputRef.current.focus();
  };
  const handleOnSelect = (val: string, item: any) => {
    setSearchValue(val);
    setIsOpened(false);
    console.info('test');
    console.log(item);
  };
  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    setSearchValue(e.target.value);
    setIsOpened(true);
  };

  return (
    <>
      <Autocomplete
        getItemValue={item => item.description}
        renderMenu={(items, value) => (
          <div>{items.length === 0 ? `No matches for ${value}` : items}</div>
        )}
        shouldItemRender={(item, value) =>
          item.description.toLowerCase().indexOf(value.toLowerCase()) > -1
        }
        items={data.Sheet}
        renderItem={(item, isHighlighted) => (
          <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
            {item.description}
          </div>
        )}
        autoHighlight={false}
        value={searchValue}
        onChange={e => handleOnChange(e)}
        onSelect={(val, item) => handleOnSelect(val, item)}
        open={isOpened}
        ref={inputRef}
      />
      <Button value="clear" onClick={handleButtonOnClick}></Button>
    </>
  );
};
Kiwimoisi
  • 4,086
  • 6
  • 33
  • 64

1 Answers1

0

Typescript is inferring the type of inputRef to be MutableRefObject<undefined>. You have to indicate the type that the ref is going to be using and assign the initial value for the ref.

const inputRef = useRef<LegacyRef<Autocomplete> | undefined>(undefined);
Victor Santizo
  • 1,145
  • 2
  • 7
  • 16
  • thanks for the answer ! I have tried that unfortunately I get the exact same error :( – Kiwimoisi Mar 17 '23 at 07:37
  • could you show how you're forwarding the ref within the `Autocomplete` component? That might help me give you a better answer – Victor Santizo Mar 17 '23 at 07:48
  • that's basically it , it's just returning a standalone Search component, it's the only functionnal component on the page. I just created a ref to this Autocomplete component which is imported from react-autocomplete package. And just adding a ref to it so I can trigger a refocus after clicking on my button – Kiwimoisi Mar 17 '23 at 07:49
  • I just modified the answer, that might work – Victor Santizo Mar 17 '23 at 07:56
  • I have tried this with the same outcome unfortunately ! Very intriguing issue – Kiwimoisi Mar 17 '23 at 09:34