How to properly forward a ref to a material-ui component from a functional component

user_1237060 0
Viewed 5225

I'm using the following packages to create an autocomplete solution for an application I'm working on:

I'm trying to use the Component prop on the react-autocomplete-input element by passing in the material-ui TextareaAutosize component.

Directly passing in TextareaAutosize from MUI

import {TextareaAutosize} from '@material-ui/core';
<AutocompleteInput Component={TextareaAutosize} />

This works, however I don't have any control over the props it gets.

Through a custom component so I can add props

const CustomTextarea = forwardRef((props, ref) => (
  // If I don't forward the ref I get an error...
  <TextareaAutosize
    placeholder="Material-ui through custom component..."
    ref={ref}
  />
));

<AutocompleteInput Component={CustomTextarea} />

This stops the autocomplete from working altogether. However, the placeholder still shows properly which means the props are at least making it through.

You can see all the examples in my sandbox below.

Examples: https://codesandbox.io/s/frosty-wildflower-48iyd

react-forwardref material-ui reactjs javascript
1 Answers

You just missed to pass the default props

const CustomTextarea = forwardRef((props, ref) => (
  // If I don't forward the ref I get an error...
  <TextareaAutosize
    placeholder="Material-ui through custom component..."
    {...props} // here
    ref={ref}
  />
))
user_82544840
Related