Fix dnnsoftware#5912: Resource Manger Context Menu Doesn't reposition…

… after scroll.
zyhfish · Jan 14, 2024 · 797eaa0 · 797eaa0
1 parent 5343fec
commit 797eaa0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/...r/ResourceManager.Web/src/components/dnn-rm-folder-list-item/dnn-rm-folder-list-item.scss b/...r/ResourceManager.Web/src/components/dnn-rm-folder-list-item/dnn-rm-folder-list-item.scss
@@ -3,6 +3,7 @@
   font-weight: normal;
   color: black;
   transition: all 300ms ease-in-out;
+  position: relative;
 }
 :host(.selected){
   .item-name{
@@ -22,7 +23,7 @@ button{
   cursor: pointer;
 }
 dnn-collapsible{
-  position: fixed;
+  position: absolute;
   display: none;
   border: 1px solid lightgray;
   box-shadow: 2px 2px 4px -2px;

diff --git a/...er/ResourceManager.Web/src/components/dnn-rm-folder-list-item/dnn-rm-folder-list-item.tsx b/...er/ResourceManager.Web/src/components/dnn-rm-folder-list-item/dnn-rm-folder-list-item.tsx
@@ -94,14 +94,17 @@ export class DnnRmFolderListItem {
 
   private handleContextMenu(e: MouseEvent): void {
     e.preventDefault();
+    this.dismissContextMenu();
+
     this.itemsClient.getFolderItem(Number.parseInt(this.folder.data.key))
     .then(item => {
       const collapsible = document.createElement("dnn-collapsible");
       const folderContextMenu = document.createElement("dnn-rm-folder-context-menu");
       collapsible.appendChild(folderContextMenu);
       folderContextMenu.item = item;
-      collapsible.style.left = `${e.pageX}px`;
-      collapsible.style.top = `${e.pageY}px`;
+      const parentPosition = this.el.getBoundingClientRect();
+      collapsible.style.left = `${e.clientX - parentPosition.left}px`;
+      collapsible.style.top = `${e.clientY - parentPosition.top}px`;
       collapsible.style.display = "block";
       this.el.shadowRoot.appendChild(collapsible);
       setTimeout(() => {