Only close annotation form on focus loss when empty

dodona-edu · Sep 12, 2023 · e0a470f · e0a470f
1 parent 2faf152
commit e0a470f
Showing 1 changed file with 25 additions and 8 deletions.
diff --git a/app/assets/javascripts/components/annotations/annotation_form.ts b/app/assets/javascripts/components/annotations/annotation_form.ts
@@ -50,6 +50,8 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
     @property({ state: true })
     _savedAnnotationTitle: string;
     @property({ state: true })
+    _savedAnnotationSearchInput = "";
+    @property({ state: true })
     saveAnnotation = false;
 
     get savedAnnotationTitle(): string {
@@ -69,6 +71,15 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
         },
         savedAnnotationId: () => {
             this._savedAnnotationId = this.savedAnnotationId || "";
+        },
+        saveAnnotation: () => {
+            this.listenForCloseIfEmpty();
+        },
+        _annotationText: () => {
+            this.listenForCloseIfEmpty();
+        },
+        _savedAnnotationSearchInput: () => {
+            this.listenForCloseIfEmpty();
         }
     };
 
@@ -108,13 +119,23 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
         }
     }
 
-    connectedCallback(): void {
-        super.connectedCallback();
-        if (!this.annotationText) {
+    get isEmpty(): boolean {
+        return this._annotationText.length === 0 && !this.saveAnnotation && this._savedAnnotationSearchInput.length === 0;
+    }
+
+    listenForCloseIfEmpty(): void {
+        if (this.isEmpty) {
             this.listenForClose();
+        } else {
+            this.stopListeningForClose();
         }
     }
 
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.listenForCloseIfEmpty();
+    }
+
     disconnectedCallback(): void {
         super.disconnectedCallback();
         this.stopListeningForClose();
@@ -125,15 +146,11 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
             this._annotationText = e.detail.text;
         }
         this._savedAnnotationId = e.detail.id;
+        this._savedAnnotationSearchInput = e.detail.title;
     }
 
     handleTextInput(): void {
         this._annotationText = this.inputRef.value.value;
-        if (this._annotationText.length > 0) {
-            this.stopListeningForClose();
-        } else {
-            this.listenForClose();
-        }
     }
 
     handleCancel(): void {