Semi-Controlled Input

SemiControlledInput.js

export default class Input extends React.Component {
  static defaultProps = {
    onChange() {},
    onFocus() {},
    onBlur() {}
  };

  constructor(props) {
    super();
    this.state = {
      isFocused: false,
      currentValue: props.value
    };
  }

  handleChange = (e, ...rest) => {
    this.setState({ currentValue: e.target.value });
    this.props.onChange(e, ...rest);
  };

  handleFocus = (...args) => {
    this.setState({ isFocused: true });
    this.props.onFocus(...args);
  };

  handleBlur = (...args) => {
    this.setState({ isFocused: false });
    this.props.onBlur(...args);
  };

  componentWillReceiveProps(nextProps) {
    if (!this.state.isFocused) {
      this.setState({ currentValue: nextProps.value });
    }
  }

  render() {
    return (
      <input
        {...this.props}
        onChange={this.handleChange}
        onFocus={this.handleFocus}
        onBlur={this.handleBlur}
        value={this.state.currentValue}
      />
    );
  }
}

Use this just like a regular input.
The only difference is that when it's focused, it won't take outside values.
In other words, it's "uncontrolled" when focused, "controlled" when not.
This is commonly the desired behavior for good UX.

This is a very useful little component! Would you mind publishing this on npm (and giving it a license)?

@aerly Sure, I'll try to get around to it. Love icepick BTW!