Cannot read property 'focus' of null error when extracting component

Question

I would like to implement Algolia search with Ant Design Autocomplete. But I get Cannot read property 'focus' of null error when I try to extract the SearchInput component (without extraction, i. e. when I leave it in the same file, it works fine). Here is the working code:

import React, { useState } from 'react'
import { AutoComplete, Input } from 'antd'

const SearchAutocomplete = connectAutoComplete(
  ({ hits, currentRefinement, refine }) => {

    ...

    return (
      <AutoComplete
        options={options}
        onSelect={onSelect}
        onSearch={handleSearch}
        open={open}
      >
        <Input
          value={currentRefinement}
          onChange={e => refine(e.currentTarget.value)}
        />
      </AutoComplete>
    );
  }
);

But when I move Input to a separate component like this it doesn't work:

import React, { useState } from 'react'
import { AutoComplete } from 'antd'
import SearchInput from './SearchInput'

const SearchAutocomplete = connectAutoComplete(
  ({ hits, currentRefinement, refine }) => {

    ...

    return (
      <AutoComplete
        options={options}
        onSelect={onSelect}
        onSearch={handleSearch}
        open={open}
      >
        <SearchInput value={currentRefinement} onChange={e => refine(e.currentTarget.value)}/>
      </AutoComplete>
    );
  }
);

And the SearchInput component itself:

import React from 'react'
import { Input } from 'antd'

const SearchInput = props => {
  const { value, onChange} = props;

  return (
    <Input
      value={value}
      onChange={onChange}
    />
  )
}

Here is the link to codesandbox with the extracted component. How can I fix this error?

Answer 1

In MUI I had a similar problem and I solved it thanks to this solution in GitHub.

If you are using a TextField as renderInput and have custom additional inputProps, then you need to add ...params.inputProps, in your inputProps like this:

renderInput={(params) => (
    <TextField
      {...params}
      label="Choose a country"
      inputProps={{
        ...params.inputProps, // HERE
        maxLength: 255
      }}
    />
  )}