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 にも同様のエラーで悩んでいるコメントが見られたので、備忘録がてら。

© 2018 kk-web