fixes toggle search result and remove gfont dependency

Previously, the search resutls were displayed only when the search
input was in focus and were hidden when it went out of focus. In
order to make the options in the list work, the focus out event
was delayed by 300ms.
Now, to get rid of the delay, an onClick event is added to the outer-
most container of the component which checks if the clicked element
(target of the event) is an descendant of the 'search-container'
class housing the search input. If it is an descendant and the
search query is not empty, then the result list is displayed otherwise
it is hidden.

Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>

public/index.html

@@ -11,7 +11,6 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/containers/home/home.js

@@ -36,7 +36,7 @@ function SearchTextField(props) {
     variant="outlined"
     label={
       <div className="search-label">
-        {props.labelText}
+        {props.labeltext}
       </div>
     }
     InputProps={
@@ -88,6 +88,7 @@ class Home extends React.Component {
       this.setState({
         device: data["devices"][device_id],
         showDeviceData: true,
+        showSearch: false,
         query: data["devices"][device_id]["vendor"] + " " + data["devices"][device_id]["model"] + " " + data["devices"][device_id]["variant"]
       });
     }
@@ -95,11 +96,10 @@ class Home extends React.Component {
 
   search = (event) => {
     const query = event.target.value;
-    var showSearch = false;
     this.setState({
       query,
       searchResults: [],
-      showSearch,
+      showSearch: false,
     });
     const deviceNames = this.fuzzySet.get(query, undefined, 0);
     var searchResults = [];
@@ -108,27 +108,36 @@ class Home extends React.Component {
         searchResults.push(data['devices'][this.deviceNamesID[deviceNames[i][1]]]);
       }
     }
-    showSearch = true;
-    if (query === '') {
-      showSearch = false;
-    }
     this.setState({
       searchResults,
-      showSearch,
+      showSearch: true,
     });
   }
 
-  hideSearch = () => {
-    setTimeout(() => {
-      this.setState({
-        showSearch: false,
-      });
-    }, 300);
+  isDescendant = (parent, child) => {
+    var node = child.parentNode;
+    if (child === parent) {
+        return true;
+    }
+    while (node !== null) {
+        if (node === parent) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+  }
+
+  toggleSearchIfIntended = (event) => {
+    var showSearch = this.isDescendant(document.getElementsByClassName('search-container')[0], event.target) && this.state.query !== '';
+    this.setState({
+      showSearch
+    });
   }
 
   render() {
     return (
-      <Container className="home-container">
+      <Container className="home-container" onClick={this.toggleSearchIfIntended}>
         <Paper className="home-container-paper">
           <Typography variant="h5">
             {this.props.t('appIntro.head')}
@@ -137,16 +146,17 @@ class Home extends React.Component {
             {this.props.t('appIntro.para')}
           </Typography>
           <br />
-          <FormControl fullWidth>
-            <SearchTextField
-              id="outlined-adornment-search-devices"
-              labelText={this.props.t('components.search.label')}
-              value={this.state.query}
-              onChange={this.search}
-              onClick={this.search}
-              onBlur={this.hideSearch}
-            />
-          </FormControl>
+          <div className="search-container">
+            <FormControl fullWidth>
+              <SearchTextField
+                id="outlined-adornment-search-devices"
+                labeltext={this.props.t('components.search.label')}
+                value={this.state.query}
+                onChange={this.search}
+                onClick={this.search}
+              />
+            </FormControl>
+          </div>
           {
             this.state.showSearch && (
               <Paper elevation={4} className="search-results">