Bugfixes and improvements

src/app/comment-box/comment-box.component.html

@@ -1,5 +1,5 @@
 <div #commentInput cdkOverlayOrigin #commentBox="cdkOverlayOrigin" class="comment-box" contenteditable="true"
-    (input)="handleTextChangedEvent($event)" (keydown)="handleKeyEvent($event)" (focus)="onFocusIn($event)"
+    (input)="handleInputEvent($event)" (keydown)="handleKeyEvent($event)" (focus)="onFocusIn($event)"
     (blur)="onFocusOut($event)">
 </div>
 
@@ -26,13 +26,14 @@
     offsetX: menuOffsetX,
     offsetY: menuOffsetY - menuOpenAboveYShift
 }
-]">
+]" (overlayOutsideClick)="clickOutsideMenu($event)">
     <div class="mat-mdc-menu-panel" #menuContent>
         <div class="mat-mdc-menu-content">
             @for (item of filteredSelectionList; track item; let index_ = $index) {
             <div class="mat-mdc-menu-item mat-focus-indicator"
                 [class.mat-mdc-menu-item-highlighted]="index_ === selectedDropdownItemIndex"
-                [class.active]="index_ === selectedDropdownItemIndex">{{item}}</div>
+                [class.active]="index_ === selectedDropdownItemIndex" (click)="clickMention(index_)">{{item}}
+            </div>
             }
         </div>
     </div>

src/app/comment-box/comment-box.component.ts

@@ -117,12 +117,11 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
 
   onFocusOut(event: FocusEvent) {
     if (!this._commentInputRef.nativeElement.contains(event.relatedTarget as Element)) {
-      this.commentText = JSON.stringify(this._commentInputRef.nativeElement.innerHTML);
+      this.commentText = this._commentInputRef.nativeElement.innerHTML;
       this.touched = true;
       this.focused = false;
       this.onTouched();
       this.onChange(this.commentText);
-      this.isOpen = false;
       this.stateChanges.next();
     }
   }
@@ -182,17 +181,33 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
           break;
         case ENTER || TAB:
           this.addMention(event.target as HTMLInputElement);
-          this.handleTextChangedEvent(event, true, 1);
+          this.handleTextChanged(true, 1);
           event.preventDefault();
           break;
       }
     }
   }
 
-  handleTextChangedEvent(event: any, skipPositionGetting: boolean = false, offset: number = 0) {
+  clickOutsideMenu(event: any) {
-    event.preventDefault();
+    if (this.isOpen)
+      this.removeFocusedMention(this._commentInputRef.nativeElement as HTMLInputElement);
+    this.isOpen = false;
+  }
 
-    let htmlElement = (event.target as HTMLInputElement);
+  clickMention(selectedIndex: number) {
+    this.selectedDropdownItemIndex = selectedIndex;
+    this.addMention(this._commentInputRef.nativeElement as HTMLInputElement);
+    this.handleTextChanged(true, 1);
+  }
+
+
+  handleInputEvent(event: Event) {
+    event.preventDefault();
+    this.handleTextChanged();
+  }
+
+  handleTextChanged(skipPositionGetting: boolean = false, offset: number = 0) {
+    let htmlElement = this._commentInputRef.nativeElement as HTMLInputElement;
     if (!skipPositionGetting)
       offset = Cursor.getPosition(htmlElement);
 
@@ -214,6 +229,8 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
       // filter menu entries
       let searchQuery = focusedMentionElement.textContent?.substring(1);
       this.filteredSelectionList = this.mentionListItems.filter((element) => element.toLocaleLowerCase().includes(searchQuery?.toLocaleLowerCase() ?? ""))
+      if (this.selectedDropdownItemIndex > this.filteredSelectionList.length - 1)
+        this.selectedDropdownItemIndex = this.filteredSelectionList.length - 1;
 
       this.isOpen = true;
     } else {
@@ -253,7 +270,7 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
       }
     }
 
-    if (this.selectedDropdownItemIndex < this.mentionListItems.length - 1)
+    if (this.selectedDropdownItemIndex < this.filteredSelectionList.length - 1)
       this.selectedDropdownItemIndex += 1;
     else {
       this.selectedDropdownItemIndex = 0;
@@ -278,7 +295,7 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
     if (this.selectedDropdownItemIndex > 0)
       this.selectedDropdownItemIndex -= 1;
     else {
-      this.selectedDropdownItemIndex = this.mentionListItems.length - 1;
+      this.selectedDropdownItemIndex = this.filteredSelectionList.length - 1;
       this._menuContent.nativeElement.scrollTop = listEl.scrollHeight;
     }
   }
@@ -288,7 +305,7 @@ export class CommentBoxComponent implements MatFormFieldControl<string>, Control
     let focusedElements = element.querySelectorAll(Cursor.focusedClassName);
     if (focusedMention) {
       // set text and remove ignore to style mention
-      focusedMention.textContent = `@${this.mentionListItems[this.selectedDropdownItemIndex]}`;
+      focusedMention.textContent = `@${this.filteredSelectionList[this.selectedDropdownItemIndex]}`;
       focusedMention.classList.remove(Cursor.focusedClassName);
       focusedMention.classList.remove("ignore")