BlurTextInput.tsx

import * as React from 'react';

interface BlurTextInputStateInterface {
  value: string,
  lastChangeEvent: React.ChangeEvent<HTMLInputElement>,
}

export default class extends React.Component<React.InputHTMLAttributes<HTMLInputElement>, BlurTextInputStateInterface> {
  constructor(props: any) {
    super(props);

    this.state = {
      value: props.value,
      lastChangeEvent: null,
    };

    this.onChange = this.onChange.bind(this);
    this.onBlur = this.onBlur.bind(this);
  }

  public componentWillReceiveProps(nextProps) {
    if (nextProps.value === this.props.value) {
      return;
    }

    this.setState({
      value: nextProps.value,
      lastChangeEvent: null,
    })
  }

  public onBlur() {
    if (this.state.lastChangeEvent) {
      this.props.onChange(this.state.lastChangeEvent);
    }
  }

  public onChange(event: React.ChangeEvent<HTMLInputElement>) {
    event.persist();

    this.setState({
      value: event.currentTarget.value,
      lastChangeEvent: event,
    });
  }

  public render() {
    return <input
      {...this.props}
      onBlur={this.onBlur}
      onChange={this.onChange}
      value={this.state.value}
    />
  }
}