CODEWITHSUNDEEP
reactjsmaterial-uigoogle-places-autocomplete
Shivam Rawat
Shivam Rawat

Reputation: 311

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

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
 />

Upvotes: 7

Views: 3822

Answers (1)

Zachary Haber
Zachary Haber

Reputation: 11037

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

Upvotes: 20

Related Questions