feat: Inject Custom Input component type

[abdennour]

• New props named "as" to inject custom component type , default is "input"

import MyInput from './MyInput'
<AutoComplete as={MyInput} {...otherProps} />

[abdennour]

It resolves #247 :)

[CMTegner]

@abdennour seems like you've ignored most/all of the discussion in #247. Simple testing proves that this doesn't work due to missing ref support (your test is too naive: it only tests that the provided component is rendered, not that it behaves as expected).

This feature will not likely be implemented before some solid use-cases are presented, and a thorough discussion regarding the API surface has been performed. That was the intention behind keeping #247 open. If you have a strong argument as to why this feature is needed, please present it for discussion there.

[Dattaya]

@CMTegner one use case is to be able to use material-ui/TextField or material-ui/Input underneath (I'm talking about v1.0-beta). react-autosuggests allows that as can be seen in an example in the material-ui docs. Though in addition to as it would require a refFuncName property. I did that created a component:

const AutocompleteTextField = (props) => (
  <Autocomplete
    inputComponent={TextField}
    refFuncName="inputRef"
    {...props}
  />
);

and here's the result:

[CMTegner]

v1.6.0 includes support for props.renderInput which can be used to the same effect as this PR.

[CMTegner]

@Dattaya thanks for the info! You should be able to use renderInput to make Autocomplete wrap a Material-UI TextField.

[Dattaya]

I tried this new API and it works flawlessly with material-ui and of course the same holds true for other UI libraries. Thank you, @CMTegner!

[CMTegner]

No problem, glad it helped! :)

[azcn2503]

Hi all,

When trying to use renderInput to render a Material UI TextField, I get errors regarding accessing the input ref. It seems that this is because AutoComplete is trying to access getBoundingClientRect() of the TextField component rather than TextField's input ref, which is accessible at this.refs.input._el.input. Any ideas for a workaround? Or should I raise an issue?

[CMTegner]

You need to pass props.ref to inputRef:

renderInput({ ref, ...props }) {
  return <Input inputRef={ref} {...props} />
}