@bigfishtv/cockpit/src/components/input/SearchInput.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'

import Icon from '../Icon'

export default class SearchInput extends Component {
	static propTypes = {
		value: PropTypes.string,
		placeholder: PropTypes.string,
		onChange: PropTypes.func,
	}

	static defaultProps = {
		placeholder: 'Search...',
	}

	onClear = () => {
		this.props.onChange('')
		this.input.focus()
	}

	render() {
		const { value, placeholder, onChange } = this.props
		return (
			<div className="input-group">
				<input
					ref={el => (this.input = el)}
					placeholder={placeholder}
					value={value || ''}
					type="search"
					onChange={event => onChange(event.target.value)}
				/>
				{value && (
					<div className="input-group-icon" onClick={this.onClear}>
						<Icon name="close" size="18" />
					</div>
				)}
			</div>
		)
	}
}