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

• Material UI 4
• react-autoplete-input

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

Directly passing in TextareaAutosize from MUI

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

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

Through a custom ponent 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 ponent..."
    ref={ref}
  />
));

<AutopleteInput Component={CustomTextarea} />

This stops the autoplete 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:

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

• Material UI 4
• react-autoplete-input

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

Directly passing in TextareaAutosize from MUI

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

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

Through a custom ponent 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 ponent..."
    ref={ref}
  />
));

<AutopleteInput Component={CustomTextarea} />

This stops the autoplete 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

• javascript
• reactjs
• material-ui
• react-forwardref

1 Answer 1

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 ponent..."
    {...props} // here
    ref={ref}
  />
))