1 files changed, 19 insertions, 12 deletions

diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
index 8ad0b7dde..13f0ac4fc 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.tsx
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -1,20 +1,27 @@
-import { action, observable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc } from '../../../fields/Doc';
+import { DocData } from '../../../fields/DocSymbols';
 import { LinkManager } from '../../util/LinkManager';
 import './LinkDescriptionPopup.scss';
 import { TaskCompletionBox } from './TaskCompletedBox';
 
 @observer
 export class LinkDescriptionPopup extends React.Component<{}> {
-    @observable public static descriptionPopup: boolean = false;
-    @observable public static showDescriptions: string = 'ON';
-    @observable public static popupX: number = 700;
-    @observable public static popupY: number = 350;
+    public static Instance: LinkDescriptionPopup;
+    @observable public display: boolean = false;
+    @observable public showDescriptions: string = 'ON';
+    @observable public popupX: number = 700;
+    @observable public popupY: number = 350;
     @observable description: string = '';
     @observable popupRef = React.createRef<HTMLDivElement>();
 
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+        LinkDescriptionPopup.Instance = this;
+    }
+
     @action
     descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.description = e.currentTarget.value;
@@ -22,16 +29,16 @@ export class LinkDescriptionPopup extends React.Component<{}> {
 
     @action
     onDismiss = (add: boolean) => {
-        LinkDescriptionPopup.descriptionPopup = false;
+        this.display = false;
         if (add) {
-            LinkManager.currentLink && (Doc.GetProto(LinkManager.currentLink).link_description = this.description);
+            LinkManager.currentLink && (LinkManager.currentLink[DocData].link_description = this.description);
         }
     };
 
     @action
     onClick = (e: PointerEvent) => {
         if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) {
-            LinkDescriptionPopup.descriptionPopup = false;
+            this.display = false;
             TaskCompletionBox.taskCompleted = false;
         }
     };
@@ -46,13 +53,13 @@ export class LinkDescriptionPopup extends React.Component<{}> {
     }
 
     render() {
-        return (
+        return !this.display ? null : (
             <div
                 className="linkDescriptionPopup"
                 ref={this.popupRef}
                 style={{
-                    left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700,
-                    top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350,
+                    left: this.popupX ? this.popupX : 700,
+                    top: this.popupY ? this.popupY : 350,
                 }}>
                 <input
                     className="linkDescriptionPopup-input"