From ff8b7df8b1c0184bab87b3398b14c77ae3169b3c Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 11 Feb 2020 09:17:55 +1300
Subject: [PATCH] Only update when term or pristine changes, fixes #483

---
 src/js/components/Fields/SearchForm.js | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/js/components/Fields/SearchForm.js b/src/js/components/Fields/SearchForm.js
index dc283b1d..32b85fe9 100755
--- a/src/js/components/Fields/SearchForm.js
+++ b/src/js/components/Fields/SearchForm.js
@@ -10,21 +10,33 @@ class SearchForm extends React.Component {
     super(props);
 
     this.state = {
-      term: this.props.term,
+      term: props.term,
       pristine: true,
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.state.pristine && this.state.term == '' && this.state.term !== nextProps.term) {
+  componentWillReceiveProps = (nextProps) => {
+    const { pristine, term } = this.state;
+    if (pristine && term === '' && term !== nextProps.term) {
       this.setState({ term: nextProps.term, pristine: false });
     }
   }
 
-  handleBlur(e) {
+  shouldComponentUpdate = (nextProps, nextState) => {
+    const { term: termProp } = this.props;
+    const { term: termState } = this.props;
+    if (nextProps.term !== termProp) return true;
+    if (nextState.term !== termState) return true;
+
+    return false;
+  }
+
+  handleBlur() {
+    const { onBlur } = this.props;
+    const { term } = this.state;
     this.setState({ pristine: false });
-    if (this.props.onBlur) {
-      this.props.onBlur(this.state.term);
+    if (onBlur) {
+      onBlur(term);
     }
   }
 
@@ -62,6 +74,7 @@ class SearchForm extends React.Component {
   }
 
   render() {
+    console.log('rendering', this.state);
     return (
       <form className="search-form" onSubmit={(e) => this.handleSubmit(e)}>
         <label>