How do I use Autocomplete component of Material UI with InputBase?

Question

The params object dosen't seem to be working with InputBase. I also tried ref={params.inputProps}. Im using the googleplaces autocomplete

<Autocomplete
  id="combo-box-demo"
  options={autocomplete}
  style={{ width: 300 }}
                        
  renderInput={(params) => <TextField {...params}  />} // InputBase instead of TextField
 />

Answer 1

You just have to spread out the params. The params includes InputLabelProps and InputProps, so you have to separate those out from the rest, and spread the InputProps back in.

    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => {
        const {InputLabelProps,InputProps,...rest} = params;
        return <InputBase {...params.InputProps} {...rest}  />}}
    />

Working demo: https://codesandbox.io/s/material-demo-forked-6yhsk?file=/demo.tsx