Search form pristine so we can sensibly update without clearing input field

mopidy_iris/static/app.js

@@ -57477,12 +57477,33 @@ var SearchForm = function (_React$Component) {
 		var _this = _possibleConstructorReturn(this, (SearchForm.__proto__ || Object.getPrototypeOf(SearchForm)).call(this, props));
 
 		_this.state = {
-			term: _this.props.term
+			term: _this.props.term,
+			pristine: true
 		};
 		return _this;
 	}
 
 	_createClass(SearchForm, [{
+		key: 'componentWillReceiveProps',
+		value: function componentWillReceiveProps(nextProps) {
+			if (this.state.pristine && this.state.term == "" && this.state.term !== nextProps.term) {
+				this.setState({ term: nextProps.term, pristine: false });
+			}
+		}
+	}, {
+		key: 'handleBlur',
+		value: function handleBlur(e) {
+			this.setState({ pristine: false });
+			if (this.props.onBlur) {
+				this.props.onBlur(this.state.term);
+			}
+		}
+	}, {
+		key: 'handleFocus',
+		value: function handleFocus(e) {
+			this.setState({ pristine: false });
+		}
+	}, {
 		key: 'handleSubmit',
 		value: function handleSubmit(e) {
 			e.preventDefault();
@@ -57528,12 +57549,15 @@ var SearchForm = function (_React$Component) {
 					null,
 					_react2.default.createElement('input', {
 						type: 'text',
-						placeholder: this.props.term ? this.props.term : "Search...",
+						placeholder: 'Search...',
 						onChange: function onChange(e) {
-							return _this2.setState({ term: e.target.value });
+							return _this2.setState({ term: e.target.value, pristine: false });
 						},
 						onBlur: function onBlur(e) {
-							return _this2.props.onBlur !== undefined ? _this2.props.onBlur(_this2.state.term) : null;
+							return _this2.handleBlur;
+						},
+						onFocus: function onFocus(e) {
+							return _this2.handleFocus;
 						},
 						value: this.state.term
 					})

src/js/components/Fields/SearchForm.js

@@ -1,8 +1,6 @@
-
 import React from 'react'
 import { connect } from 'react-redux'
-
-import { createStore, bindActionCreators } from 'redux'
+import { bindActionCreators } from 'redux'
 
 import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'
@@ -13,10 +11,28 @@ class SearchForm extends React.Component{
 		super(props);
 
 		this.state = {
-			term: this.props.term
+			term: this.props.term,
+			pristine: true,
 		}
 	}
 
+	componentWillReceiveProps(nextProps) {
+		if (this.state.pristine && this.state.term == "" && this.state.term !== nextProps.term) {
+			this.setState({term: nextProps.term, pristine: false});
+		}
+	}
+
+	handleBlur(e) {
+		this.setState({pristine: false});
+		if (this.props.onBlur) {
+			this.props.onBlur(this.state.term);
+		}
+	}
+
+	handleFocus(e) {
+		this.setState({pristine: false});
+	}
+
 	handleSubmit(e){
 		e.preventDefault();
 
@@ -51,12 +67,13 @@ class SearchForm extends React.Component{
 		return (
 			<form className="search-form" onSubmit={e => this.handleSubmit(e)}>
 				<label>
-					<input					
+					<input
 						type="text"
-						placeholder={this.props.term ? this.props.term : "Search..."}
-						onChange={e => this.setState({term: e.target.value})}
-						onBlur={e => (this.props.onBlur !== undefined ? this.props.onBlur(this.state.term) : null)}
-						value={ this.state.term }
+						placeholder="Search..."
+						onChange={e => this.setState({term: e.target.value, pristine: false})}
+						onBlur={e => this.handleBlur}
+						onFocus={e => this.handleFocus}
+						value={this.state.term}
 					/>
 					</label>
 			</form>