fixed link relationship search visibility issues

relationship search box now properly disappears on blur and reappears on focus without compromising relationship setting. Also refactored search result click handling

1 files changed, 16 insertions, 15 deletions

diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx
index f8afa22e1..bb128f746 100644
--- a/src/client/views/linking/LinkRelationshipSearch.tsx
+++ b/src/client/views/linking/LinkRelationshipSearch.tsx
@@ -1,34 +1,33 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Tooltip } from "@material-ui/core";
-import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, StrListCast } from "../../../fields/Doc";
-import { LinkManager } from "../../util/LinkManager";
 import './LinkEditor.scss';
 import React = require("react");
-import { List } from "../../../fields/List";
 
 interface LinkRelationshipSearchProps {
     results: string[] | undefined;
     display: string;
-    //callback fns to set rel + hide dropdown upon setting
-    setRelationshipValue: (value: string) => void;
-    toggleRelationshipResults: () => void;
+    //callback fn to set rel + hide dropdown upon setting
     handleRelationshipSearchChange: (result: string) => void;
+    toggleSearch: () => void;
 }
 @observer
 export class LinkRelationshipSearch extends React.Component<LinkRelationshipSearchProps> {
+
     handleResultClick = (e: React.MouseEvent) => {
         console.log("click");
         const relationship = (e.target as HTMLParagraphElement).textContent;
         if (relationship) {
-            console.log("new rel " + relationship);
-            this.props.setRelationshipValue(relationship);
-            this.props.toggleRelationshipResults();
             this.props.handleRelationshipSearchChange(relationship)
         }
     }
 
+    handleMouseEnter = () => {
+        this.props.toggleSearch();
+    }
+
+    handleMouseLeave = () => {
+        this.props.toggleSearch();
+    }
+
     /**
      * Render an empty div to increase the height of LinkEditor to accommodate 2+ results 
     */
@@ -41,7 +40,11 @@ export class LinkRelationshipSearch extends React.Component<LinkRelationshipSear
     render() {
         return (
             <div className="linkEditor-relationship-dropdown-container">
-                <div className="linkEditor-relationship-dropdown" style={{ display: this.props.display }}>
+                <div className="linkEditor-relationship-dropdown"
+                    style={{ display: this.props.display }}
+                    onMouseEnter={this.handleMouseEnter}
+                    onMouseLeave={this.handleMouseLeave}
+                >
                     {   // return a dropdown of relationship results if there exist results
                         this.props.results
                             ? this.props.results.map(result => {
@@ -50,14 +53,12 @@ export class LinkRelationshipSearch extends React.Component<LinkRelationshipSear
                                 </p>)
                             })
                             : <p>No matching relationships</p>
-
                     }
                 </div>
 
                 {/*Render an empty div to increase the height of LinkEditor to accommodate 2+ results */}
                 {this.emptyDiv()}
             </div>
-
         )
     }
 }
\ No newline at end of file