Move hasFocus to internal state

1 files changed, 57 insertions, 38 deletions

diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx
index 7890423..a26c277 100644
--- a/src/client/react/components/container/Search.jsx
+++ b/src/client/react/components/container/Search.jsx
@@ -15,40 +15,67 @@ const userShape = {
   type: PropTypes.string.isRequired,
 };
 
-const Search = ({
-  onInputChange,
-  onFocus,
-  onBlur,
-  hasFocus,
-  value,
-  exactMatch,
-}) => (
-  <div className={classnames('search', { 'search--has-focus': hasFocus })}>
-    <div className="search__input-wrapper">
-      <div className="search__icon-wrapper">
-        <IconFromUserType
-          userType={exactMatch ? exactMatch.type : null}
-          defaultIcon={<SearchIcon />}
-        />
+class Search extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hasFocus: false,
+    };
+
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  onFocus() {
+    this.setState({
+      hasFocus: true,
+    });
+  }
+
+  onBlur() {
+    this.setState({
+      hasFocus: false,
+    });
+  }
+
+  render() {
+    const {
+      onInputChange,
+      value,
+      exactMatch,
+    } = this.props;
+
+    const {
+      hasFocus,
+    } = this.state;
+
+    return (
+      <div className={classnames('search', { 'search--has-focus': hasFocus })}>
+        <div className="search__input-wrapper">
+          <div className="search__icon-wrapper">
+            <IconFromUserType
+              userType={exactMatch ? exactMatch.type : null}
+              defaultIcon={<SearchIcon />}
+            />
+          </div>
+          <input
+            id="search__input"
+            onChange={onInputChange}
+            value={value}
+            placeholder="Zoeken"
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+          />
+        </div>
+        <Results />
       </div>
-      <input
-        id="search__input"
-        onChange={onInputChange}
-        value={value}
-        placeholder="Zoeken"
-        onFocus={onFocus}
-        onBlur={onBlur}
-      />
-    </div>
-    <Results />
-  </div>
-);
+    );
+  }
+}
 
 Search.propTypes = {
   onInputChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func.isRequired,
-  onBlur: PropTypes.func.isRequired,
-  hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
   exactMatch: PropTypes.shape(userShape),
 };
@@ -60,7 +87,6 @@ Search.defaultProps = {
 const mapStateToProps = state => ({
   results: state.search.results,
   value: state.search.input,
-  hasFocus: state.search.hasFocus,
   exactMatch: state.search.exactMatch,
 });
 
@@ -68,13 +94,6 @@ const mapDispatchToProps = dispatch => ({
   onInputChange: (event) => {
     dispatch(inputChange(event.target.value));
   },
-  onFocus: () => {
-    dispatch(focusChange(true));
-    document.querySelector('#search__input').select();
-  },
-  onBlur: () => {
-    dispatch(focusChange(false));
-  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Search);