React Autosuggest で can't access property 'focus', _this.input is undefined に遭遇したときの対処法

2021-07-24

React Autosuggest を使っていると、以下のエラーに遭遇することがあります。

TypeError: can't access property "focus", _this.input is undefined

自分の場合は renderInputComponent を使うと上記のエラーが発生しました。

どうやら ref がうまく渡っていないと上記のエラーが発生するらしく renderInputComponent に渡すコンポーネントを以下のように作れば通るようになりました。

🙅‍♂️

const Input = (props: InputProps): JSX.Element => <input {...props} />;

🙆‍♂️

const Input = forwardRef<HTMLInputElement, Omit<InputProps, "ref">>(
  (props: Omit<InputProps, "ref">, ref): JSX.Element => (
    <input {...props} ref={ref} />
  ),
);

公式の Issues にも同様のエラーで悩んでいるコメントが見られたので、備忘録がてら。