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

3 files changed, 37 insertions, 26 deletions

diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 875e1672d..abd413f57 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -118,6 +118,10 @@
         cursor: pointer;
         border: 1px solid $medium-gray;
     }
+
+    p:hover {
+        background: $light-blue;
+    }
 }
 
 .linkEditor-followingDropdown {
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 4e104549d..2d6a6942b 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -3,14 +3,12 @@ import { Tooltip } from "@material-ui/core";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, StrListCast } from "../../../fields/Doc";
-import { Cast, DateCast, StrCast } from "../../../fields/Types";
+import { DateCast, StrCast } from "../../../fields/Types";
 import { LinkManager } from "../../util/LinkManager";
 import { undoBatch } from "../../util/UndoManager";
 import './LinkEditor.scss';
-import React = require("react");
-import { listSpec } from "../../../fields/Schema";
-import { List } from "../../../fields/List";
 import { LinkRelationshipSearch } from "./LinkRelationshipSearch";
+import React = require("react");
 
 
 interface LinkEditorProps {
@@ -30,6 +28,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @observable private buttonColor: string = "";
     @observable private relationshipButtonColor: string = "";
     @observable private relationshipSearchVisibility: string = "none";
+    @observable private searchIsActive: boolean = false;
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
 
@@ -105,25 +104,35 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     onRelationshipDown = () => this.setRelationshipValue(this.relationship);
 
     onBlur = () => {
-        // this.toggleRelationshipResults();
+        //only hide the search results if the user clicks out of the input AND not on any of the search results 
+        // i.e. if search is not active
+        if (!this.searchIsActive) {
+            this.toggleRelationshipResults();
+        }
     }
     onFocus = () => {
         this.toggleRelationshipResults();
     }
+    toggleSearchIsActive = () => {
+        this.searchIsActive = !this.searchIsActive;
+        console.log("toggle search to " + this.searchIsActive)
+    }
 
     @action
     handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
     @action
     handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-
         this.relationship = e.target.value;
     }
     @action
     handleRelationshipSearchChange = (result: string) => {
+        this.setRelationshipValue(result);
+        this.toggleRelationshipResults();
         this.relationship = result;
     }
     @computed
     get editRelationship() {
+        //NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS
         return <div className="linkEditor-description">
             <div className="linkEditor-description-label">Link Relationship:</div>
             <div className="linkEditor-description-input">
@@ -133,18 +142,16 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         id="input"
                         value={this.relationship}
                         placeholder={"Enter link relationship"}
-                        // color={"rgb(88, 88, 88)"}
                         onKeyDown={this.onRelationshipKey}
                         onChange={this.handleRelationshipChange}
-                        onClick={this.toggleRelationshipResults}
+                        onFocus={this.onFocus}
                         onBlur={this.onBlur}
                     ></input>
                     <LinkRelationshipSearch
                         results={this.getRelationshipResults()}
                         display={this.relationshipSearchVisibility}
-                        setRelationshipValue={this.setRelationshipValue}
-                        toggleRelationshipResults={this.toggleRelationshipResults}
                         handleRelationshipSearchChange={this.handleRelationshipSearchChange}
+                        toggleSearch={this.toggleSearchIsActive}
                     />
                 </div>
                 <div className="linkEditor-description-add-button"
@@ -165,7 +172,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         id="input"
                         value={this.description}
                         placeholder={"Enter link description"}
-                        // color={"rgb(88, 88, 88)"}
                         onKeyDown={this.onDescriptionKey}
                         onChange={this.handleDescriptionChange}
                     ></input>
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