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, 17 insertions, 11 deletions

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>