From 66b4d9a86fd4fb6cc61209e870fd00d8098cf2e9 Mon Sep 17 00:00:00 2001
From: Sudhanshu Gautam <me@sudhanshug.com>
Date: Wed, 3 Jul 2019 16:32:59 +0530
Subject: [PATCH] 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           |  1 -
 src/containers/home/home.js | 60 +++++++++++++++++++++----------------
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/public/index.html b/public/index.html
index b6977ca..46b6241 100644
--- a/public/index.html
+++ b/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.
diff --git a/src/containers/home/home.js b/src/containers/home/home.js
index 70b4d46..49f02e8 100644
--- a/src/containers/home/home.js
+++ b/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">