From 210e3bb552e73d338b58100bdaeffaea3d5543be Mon Sep 17 00:00:00 2001
From: "CITE\\spapacharalampous" <Sofia Papacharalampous>
Date: Tue, 16 Jul 2024 12:48:46 +0300
Subject: [PATCH] mentions ui fix

---
 .../annotation-dialog.module.ts               |  2 ++
 .../text-area-with-mentions.component.html    | 19 ++++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.module.ts b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.module.ts
index 1346fdd28..414dca8d3 100644
--- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.module.ts
+++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.module.ts
@@ -6,6 +6,7 @@ import { AnnotationDialogComponent } from './annotation-dialog.component';
 import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 import { TextAreaWithMentionsComponent } from '../components/text-area-with-mentions.component';
 import { NgxMentionsModule } from 'ngx-mentions';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 @NgModule({
 	imports: [
@@ -14,6 +15,7 @@ import { NgxMentionsModule } from 'ngx-mentions';
 		FormattingModule,
 		AutoCompleteModule,
 		NgxMentionsModule,
+		OverlayModule,
 	],
 	declarations: [
 		AnnotationDialogComponent,
diff --git a/frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html b/frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html
index 2b02fd8ad..bede0b67b 100644
--- a/frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html
+++ b/frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html
@@ -26,10 +26,19 @@
     </mat-form-field>
 
     <ng-template #menuTemplate
-      let-selectChoice="selectChoice">
-        <ngx-text-input-autocomplete-menu *ngIf="choices" [choices]="choices"
-          [getDisplayLabel]="getDisplayLabel"
-          (selectChoice)="selectChoice($event)">
-        </ngx-text-input-autocomplete-menu>
+      let-selectChoice="selectChoice"
+      >
+      <div cdkOverlayOrigin #trigger="cdkOverlayOrigin">
+        <ng-template
+        cdkConnectedOverlay
+        [cdkConnectedOverlayOrigin]="trigger"
+        cdkConnectedOverlayOpen="true"
+        >
+          <ngx-text-input-autocomplete-menu *ngIf="choices" [choices]="choices"
+            [getDisplayLabel]="getDisplayLabel"
+            (selectChoice)="selectChoice($event)">
+          </ngx-text-input-autocomplete-menu>
+        </ng-template>
+      </div>
     </ng-template>
 </div>