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