From 959ed274e3f4e8c845a923f23ec2d313253268fe Mon Sep 17 00:00:00 2001
From: Behrokh Satarnejad <62008897+bsatarnejad@users.noreply.github.com>
Date: Mon, 18 Mar 2024 16:51:07 +0100
Subject: [PATCH] [51836] Widget options popup scrolls up with the page
 (#15016)

* close context menu if it is scrolled out side of it

* first check if wrapper exists then add event listener to it

* fix eslint error
---
 .../op-context-menu.service.ts                | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/shared/components/op-context-menu/op-context-menu.service.ts b/frontend/src/app/shared/components/op-context-menu/op-context-menu.service.ts
index b13944a0f9bd..316fdfe8c6e7 100644
--- a/frontend/src/app/shared/components/op-context-menu/op-context-menu.service.ts
+++ b/frontend/src/app/shared/components/op-context-menu/op-context-menu.service.ts
@@ -61,13 +61,22 @@ export class OPContextMenuService {
       return true;
     });
 
-    // Listen to any click and close the active context menu
     const that = this;
-    document.getElementById('wrapper')!.addEventListener('click', (evt:Event) => {
-      if (that.active && !that.portalHostElement.contains(evt.target as Element)) {
-        that.close();
-      }
-    }, true);
+    const wrapper = document.getElementById('wrapper');
+    if (wrapper) {
+      // Listen to any click and close the active context menu
+      wrapper.addEventListener('click', (evt:Event) => {
+        if (that.active && !that.portalHostElement.contains(evt.target as Element)) {
+          that.close();
+        }
+      }, true);
+      // Listen if it scrolles then close the active context menu
+      wrapper.addEventListener('scroll', (evt:Event) => {
+        if (that.active && !that.portalHostElement.contains(evt.target as Element)) {
+          that.close();
+        }
+      }, true);
+    }
   }
 
   /**