Material-ui: [TextField] Add "input" property for custom Input component

[Romainpetit]

Like Select does, It'd be useful to allow TextField to receive a custom Input component.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Passing a custom Input element via the input prop.

<TextField
  label="Name"
  input={<CustomInput name="amount" id="amount-simple" />}
/>

Current Behavior

Having to stick to the default Mui Input

<TextField
  label="Name"
/>

Context

My custom Input shows a specific icon depending on the error prop

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.31 |

[oliviertassinari]

@alltom You can already do it this way:

<TextField
  label="Name"
  InputProps={{
    inputComponent: <CustomInput name="amount" id="amount-simple" />,
  }}
/>

We should minimize as much as possible the API surface. I don't think that adding a inputComponent component to the TextField will be wise. At some point, we removed inputProps too. But people were complaining about it as it's a common use case. I don't think we are in a common use case here. Thanks for raising this point 👍 .

[lucasfalcaoo]

@oliviertassinari the suggestion you wrote doesn't work. I'm trying to attach a masked input inside the Material UI TextField, but my application doesn't even load... something like this:

<TextField
                          label="Name"
                          InputProps={{
                            inputComponent: <CurrencyInput
                              id={`timeRanges.${index}.period`}
                              type="text"
                              placeholder="00:00"
                              decimalSeparator=":"
                              ref={input => this.inputRef = input}
                              maxLength={6}
                              value={timeRange.period}
                              onChangeEvent={this.onTextChange.bind(this)} />
                          }}/>

[resgar]

Do this in new versions:

<TextField
  label="Name"
  InputProps={{
    input: <CustomInput name="amount" id="amount-simple" />
  }}
/>v

[kirillgalushko]

@oliviertassinari I have the Input component with custom styles.
How can I reuse it in the TextField? I don't want to use global styles for that.
Probably it would help me:

const InputComponent = props.InputComponent || variantComponent[variant];

[oliviertassinari]

@kirillgalushko Interesting, I think that if you go down using a custom Input component (not a custom TextField) you might want to compose your own TextField component. Where does the need for the component come from?

[ElAnonimo]

@rastegars Did you get the CustomInput to show on the screen? I couldn't get mine and also my custom Input component doesn't show the auto suggestion list.

EDIT. Got the custom Input component to show with

<TextField
  label="inputData"
  InputProps={{
    inputComponent: () => <Input name="inputData" />
  }}
/>