@bigfishtv/cockpit/src/components/form/FocusField.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { withFormValue, createValue } from '@bigfishtv/react-forms'
import classnames from 'classnames'
import _debounce from 'lodash/debounce'
import _get from 'lodash/get'

@withFormValue
export default class FocusField extends Component {
	constructor(props) {
		super(props)
		this.updateFormValue = _debounce(this.updateFormValue, 100)
		this.state = { value: _get(props, 'formValue.value', '') }
	}

	static propTypes = {
		formValue: PropTypes.object.isRequired,
		className: PropTypes.string,
	}

	static defaultProps = {
		formValue: createValue({
			schema: null,
			value: '',
		}),
		className: null,
	}

	updateFormValue(value) {
		this.props.formValue.update(value)
	}

	updateValue(value) {
		this.setState({ value })
		this.updateFormValue(value)
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.formValue.value != this.props.formValue.value) this.setState({ value: nextProps.formValue.value })
	}

	render() {
		const { value } = this.state
		const { formValue, className, select, ...props } = this.props
		return (
			<input
				value={value != formValue.value ? value : formValue.value || ''}
				onChange={event => this.updateValue(event.target.value)}
				className={classnames(className, 'input-focus', formValue.errorList.length && 'error')}
				{...props}
			/>
		)
	}
}