fix(grid): toggle context transpose view

apps/desktop/src/components/grid/DataGrid.vue

@@ -83,8 +83,8 @@ import {
 import { formatGridSqlLiteral } from "@/lib/dataGridSql";
 import {
   buildTransposeRows,
+  nextContextTransposeState,
   nextTransposeState,
-  transposeAnchorRowIndex,
   transposeFieldWidth,
   transposeScrollLeftForRecord,
   visibleTransposeRecordWindow,
@@ -2029,14 +2029,21 @@ function openTranspose(rowIndex: number) {
 
 function openContextTranspose() {
   if (!contextCell.value) return;
-  openTranspose(
+  const next = nextContextTransposeState({
-    transposeAnchorRowIndex({
+    showTranspose: showTranspose.value,
-      requestedRowIndex: contextCell.value.rowIndex,
+    transposeRowIndex: transposeRowIndex.value,
-      rowIds: displayItems.value.map((item) => item.id),
+    requestedRowIndex: contextCell.value.rowIndex,
-      selectedRowIds: selectedRowIds.value,
+    rowIds: displayItems.value.map((item) => item.id),
-      selectedRange: selectedRange.value,
+    selectedRowIds: selectedRowIds.value,
-    }),
+    selectedRange: selectedRange.value,
-  );
+  });
+  transposeRowIndex.value = next.transposeRowIndex;
+  showTranspose.value = next.showTranspose;
+  if (next.showTranspose) {
+    showCellDetail.value = false;
+    nextTick(updateTransposeViewport);
+    if (next.transposeRowIndex !== null) scrollTransposeRecordIntoView(next.transposeRowIndex);
+  }
 }
 
 function toggleTranspose(rowIndex: number) {

apps/desktop/src/lib/dataGridTranspose.ts

@@ -53,6 +53,11 @@ export interface TransposeAnchorOptions {
   selectedRange: TransposeSelectionRange | null;
 }
 
+export interface ContextTransposeStateOptions extends TransposeAnchorOptions {
+  showTranspose: boolean;
+  transposeRowIndex: number | null;
+}
+
 export interface TransposeFieldWidthOptions {
   minWidth?: number;
   maxWidth?: number;
@@ -79,6 +84,11 @@ export function nextTransposeState(
   return { showTranspose: true, transposeRowIndex: requestedRowIndex };
 }
 
+export function nextContextTransposeState(options: ContextTransposeStateOptions): DataGridTransposeState {
+  const anchorRowIndex = transposeAnchorRowIndex(options);
+  return nextTransposeState(options.showTranspose, options.transposeRowIndex, anchorRowIndex);
+}
+
 export function buildTransposeRows<T>(options: BuildTransposeRowsOptions<T>): Array<DataGridTransposeRow<T>> {
   return options.columns.map((column, columnIndex) => {
     return {

packages/app-tests/dataGridTranspose.test.ts

@@ -2,6 +2,7 @@ import { strict as assert } from "node:assert";
 import test from "node:test";
 import {
   buildTransposeRows,
+  nextContextTransposeState,
   nextTransposeState,
   transposeAnchorRowIndex,
   transposeFieldWidth,
@@ -30,6 +31,23 @@ test("row number double click closes transpose for the same row", () => {
   });
 });
 
+test("context menu transpose closes when invoked for the current anchor row", () => {
+  assert.deepEqual(
+    nextContextTransposeState({
+      showTranspose: true,
+      transposeRowIndex: 2,
+      requestedRowIndex: 3,
+      rowIds: [10, 11, 12, 13, 14],
+      selectedRowIds: new Set([12, 13]),
+      selectedRange: null,
+    }),
+    {
+      showTranspose: false,
+      transposeRowIndex: null,
+    },
+  );
+});
+
 test("builds one virtualizable transpose row per field with all record values", () => {
   const rows = buildTransposeRows({
     columns: ["id", "name", "notes"],