Material-ui: [Question] Warning "changing an uncontrolled input of type text to be controlled." when using custom inputComponent

[franklixuefei]

Hi,

Currently I'm trying to plug a custom inputComponent to the TextField's inputComponent property. I hooked up the ref={inputRef} and value field, etc. However, whenever I started to type stuff in the input field, the warning showed up.

Warning: A component is changing an uncontrolled input of type text to be controlled. 
Input elements should not switch from uncontrolled to controlled (or vice versa). 
Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

To be clear, I understand what this warning means. Basically I was trying to update the input's value property from undefined to some string, resulting in converting the uncontrolled input to the controlled one.

I have been struggling with this for hours, but still haven't figured out the solution yet. I looked at the source code of Input.js in material-ui project, and it seems like I did the same logic in my code.

Could you help me take a look at my code snippet and see if you can give me some hints on how to properly hook up the input element in my custom inputComponent?

Thanks!

(You can ignore the typescript types :-))

Definition:

const InputComponent = (props: IInputComponentProps & InputProps & WithStyles<classList>) => {
  const { classes, typeAheadText, inputRef, ...rest } = props;
  return (
    <div className={classes.root}>
      {typeAheadText && <div className={classes.typeAhead}>{typeAheadText}</div>}
      <input ref={inputRef} {...rest} />
    </div>
  );
};

Usage:

render() {
    const { 
      downshiftControllerStateAndHelpers, 
      disabled, 
      typeAheadText,
      textFieldProps 
    } = this.props;
    const { getInputProps } = downshiftControllerStateAndHelpers;
    return (
      <TextField
        {...getInputProps({
          disabled,
        })}
        InputProps={{
          startAdornment: this.startAdornment(),
          endAdornment: this.endAdornment(),
          inputComponent: InputComponent,
          fullWidth: true, // TODO: test
        }}
        inputProps={{
          typeAheadText
        }}

        {...textFieldProps}
      />
    );
  }

[jpetitcolas]

I encountered the same issue. Switching the default prop value from null to '' fixed the issue.

[oliviertassinari]

@franklixuefei You will experience the very same issue with a native <input> element:

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  state = {
    value: undefined,
  };

  handleChange = event => {
    this.setState({
      value: event.target.value,
    });
  };

  render() {
    return <input value={this.state.value} onChange={this.handleChange} />;
  }
}

render(<App />, document.getElementById('root'));

https://codesandbox.io/s/qynj01z96

@jpetitcolas's solution is great 👌.