@acorex/components 20.2.0-next.18 → 20.2.0-next.19

package/fesm2022/acorex-components-menu.mjs

@@ -426,6 +426,8 @@ class AXContextMenuComponent extends NXComponent {
         this.renderer = inject(Renderer2);
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
+        this.originalNextSibling = null;
+        this.originalParent = null;
         this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
         //
         afterNextRender(() => {
@@ -564,13 +566,17 @@ class AXContextMenuComponent extends NXComponent {
     }
     /** @ignore */
     createBackdrop() {
+        if (!this.originalParent) {
+            this.originalParent = this.nativeElement.parentElement;
+            this.originalNextSibling = this.nativeElement.nextSibling;
+        }
         this.backdropElement = this.renderer.createElement('div');
         this.renderer.setStyle(this.backdropElement, 'position', 'fixed');
         this.renderer.setStyle(this.backdropElement, 'top', '0');
         this.renderer.setStyle(this.backdropElement, 'left', '0');
         this.renderer.setStyle(this.backdropElement, 'width', '100%');
         this.renderer.setStyle(this.backdropElement, 'height', '100%');
-        this.renderer.setStyle(this.backdropElement, 'z-index', '1000'); // Ensure it's below the context menu
+        this.renderer.setStyle(this.backdropElement, 'z-index', '1000');
         this.renderer.setStyle(this.backdropElement, 'background', 'transparent');
         this.createEventListeners(this.backdropElement);
         this.document.body.appendChild(this.backdropElement);
@@ -579,8 +585,11 @@ class AXContextMenuComponent extends NXComponent {
     /** @ignore */
     removeBackdrop() {
         if (this.backdropElement) {
+            if (this.originalParent) {
+                this.renderer.insertBefore(this.originalParent, this.nativeElement, this.originalNextSibling);
+            }
             if (this.backdropElement.parentNode) {
-                this.backdropElement.parentNode.removeChild(this.backdropElement);
+                this.renderer.removeChild(this.backdropElement.parentNode, this.backdropElement);
             }
             this.backdropElement = null;
         }