1 files changed, 14 insertions, 13 deletions

diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 5a9571d27..78d6aae8b 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import uuidv1 from 'uuid/v1';
 import { debounce } from 'lodash';
 
 export default @observer class SearchInput extends Component {
@@ -22,7 +21,7 @@ export default @observer class SearchInput extends Component {
     value: '',
     placeholder: '',
     className: '',
-    name: uuidv1(),
+    name: 'searchInput',
     throttle: false,
     throttleDelay: 250,
     onChange: () => null,
@@ -30,6 +29,8 @@ export default @observer class SearchInput extends Component {
     autoFocus: false,
   }
 
+  input = null;
+
   constructor(props) {
     super(props);
 
@@ -74,8 +75,6 @@ export default @observer class SearchInput extends Component {
     onReset();
   }
 
-  input = null;
-
   render() {
     const { className, name, placeholder } = this.props;
     const { value } = this.state;
@@ -90,15 +89,17 @@ export default @observer class SearchInput extends Component {
         <label
           htmlFor={name}
           className="mdi mdi-magnify"
-        />
-        <input
-          name={name}
-          type="text"
-          placeholder={placeholder}
-          value={value}
-          onChange={e => this.onChange(e)}
-          ref={(ref) => { this.input = ref; }}
-        />
+        >
+          <input
+            name={name}
+            id={name}
+            type="text"
+            placeholder={placeholder}
+            value={value}
+            onChange={e => this.onChange(e)}
+            ref={(ref) => { this.input = ref; }}
+          />
+        </label>
         {value.length > 0 && (
           <span
             className="mdi mdi-close-circle-outline"