[codex] Fix right-click delete confirmation overlap (#188)

* Fix right-click delete confirmation overlap

* Document modal and context menu stacking

Author: eviltester

apps/web/styles.css

@@ -709,6 +709,7 @@ Custom header styles for default items
 
 .data-grid-context-menu {
   position: fixed;
+  /* Keep this below the shared modal backdrops so confirm dialogs stay unobscured. */
   z-index: 2500;
   min-width: 14rem;
   max-width: min(22rem, calc(100vw - 1rem));
@@ -1189,7 +1190,8 @@ body.theme-dark .generator-status-text[data-severity='info'] {
   align-items: center;
   justify-content: center;
   background: rgba(10, 22, 16, 0.45);
-  z-index: 2000;
+  /* Keep this above the grid context menu to avoid right-click action overlap bugs. */
+  z-index: 3000;
 }
 
 .text-input-modal {

packages/core-ui/js/gui_components/data-grid-editor/data-grid-component-view.js

@@ -404,6 +404,8 @@ class DataGridComponentView {
       return;
     }
 
+    this.closeContextMenu();
+
     if (action === 'add-row') {
       this.controller.addRow();
     } else if (action === 'add-rows-above') {
@@ -431,8 +433,6 @@ class DataGridComponentView {
     } else if (action === 'auto-fit-columns') {
       this.controller.sizeColumnsToFit();
     }
-
-    this.closeContextMenu();
   }
 
   onRootChange(event) {

packages/core-ui/src/tests/grid/data-grid-component-view.test.js

@@ -242,6 +242,60 @@ describe('DataGridComponent view', () => {
     component.destroy();
   });
 
+  test('closes the right-click context menu before opening delete confirmation flows', async () => {
+    const root = document.createElement('section');
+    document.body.appendChild(root);
+    let resolveConfirm;
+    const requestConfirm = jest.fn(
+      () =>
+        new Promise((resolve) => {
+          resolveConfirm = resolve;
+        })
+    );
+    const component = createDataGridComponent({
+      root,
+      documentObj: document,
+      services: {
+        TabulatorCtor: FakeTabulator,
+        GridExtensionClass: FakeGridExtension,
+        requestConfirm,
+      },
+    });
+
+    await component.whenReady();
+    component.getGridExtras().getNumberOfSelectedRows.mockReturnValue(1);
+
+    const gridRoot = root.querySelector('[data-role="data-grid-root"]');
+    gridRoot.dispatchEvent(
+      new dom.window.MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 32,
+        clientY: 48,
+      })
+    );
+
+    const menuRoot = root.querySelector('[data-role="data-grid-context-menu"]');
+    expect(menuRoot.hidden).toBe(false);
+
+    menuRoot.querySelector('[data-context-action="delete-selected-rows"]').click();
+
+    expect(menuRoot.hidden).toBe(true);
+    expect(menuRoot.childElementCount).toBe(0);
+    expect(requestConfirm).toHaveBeenCalledWith({
+      title: 'Delete Rows',
+      message: 'Are you Sure You Want to Delete Rows?',
+    });
+    expect(component.getGridExtras().deleteSelectedRows).not.toHaveBeenCalled();
+
+    resolveConfirm(true);
+    await Promise.resolve();
+
+    expect(component.getGridExtras().deleteSelectedRows).toHaveBeenCalledTimes(1);
+
+    component.destroy();
+  });
+
   test('prefers the root owner window Tabulator when no service override is supplied', async () => {
     const originalTabulator = globalThis.Tabulator;
     const root = document.createElement('section');