From 57cd7120644ff2d0bf57d230ef6e34b923fdebbc Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Sat, 3 Feb 2024 20:10:56 +0900
Subject: [PATCH] fix number cell focus

---
 .../src/components/grid/MkDataRow.vue         |  3 ++-
 .../frontend/src/components/grid/MkGrid.vue   | 21 +++++++++++++++----
 .../src/components/grid/MkNumberCell.vue      |  2 +-
 .../src/components/grid/grid-utils.ts         | 17 +++++++++++++++
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/grid/MkDataRow.vue b/packages/frontend/src/components/grid/MkDataRow.vue
index 2352e539b4..295427a67a 100644
--- a/packages/frontend/src/components/grid/MkDataRow.vue
+++ b/packages/frontend/src/components/grid/MkDataRow.vue
@@ -9,6 +9,7 @@
 		v-for="cell in cells"
 		:key="cell.address.col"
 		:cell="cell"
+		:gridSetting="gridSetting"
 		:bus="bus"
 		@operation:beginEdit="(sender) => emit('operation:beginEdit', sender)"
 		@operation:endEdit="(sender) => emit('operation:endEdit', sender)"
@@ -39,7 +40,7 @@ const props = defineProps<{
 	bus: GridEventEmitter,
 }>();
 
-const { cells } = toRefs(props);
+const { cells, gridSetting } = toRefs(props);
 
 </script>
 
diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue
index 9e210cf582..af522ed281 100644
--- a/packages/frontend/src/components/grid/MkGrid.vue
+++ b/packages/frontend/src/components/grid/MkGrid.vue
@@ -1,7 +1,6 @@
 <template>
 <table
 	ref="rootEl"
-	tabindex="-1"
 	:class="[$style.grid, $style.border]"
 	@mousedown.prevent="onMouseDown"
 	@keydown="onKeyDown"
@@ -43,7 +42,7 @@ import MkDataRow from '@/components/grid/MkDataRow.vue';
 import MkHeaderRow from '@/components/grid/MkHeaderRow.vue';
 import { cellValidation } from '@/components/grid/cell-validators.js';
 import { CELL_ADDRESS_NONE, CellAddress, CellValue, createCell, GridCell } from '@/components/grid/cell.js';
-import { equalCellAddress, getCellAddress } from '@/components/grid/grid-utils.js';
+import { equalCellAddress, getCellAddress, getCellElement } from '@/components/grid/grid-utils.js';
 import { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { GridCurrentState, GridEvent } from '@/components/grid/grid-event.js';
@@ -454,7 +453,8 @@ function onLeftMouseDown(ev: MouseEvent) {
 				firstSelectionColumnIdx.value = cellAddress.col;
 				state.value = 'colSelecting';
 
-				rootEl.value?.focus();
+				// フォーカスを当てないとキーイベントが拾えないので
+				getCellElement(ev.target as HTMLElement)?.focus();
 			} else if (isRowNumberCellAddress(cellAddress)) {
 				unSelectionRangeAll();
 
@@ -468,7 +468,8 @@ function onLeftMouseDown(ev: MouseEvent) {
 				firstSelectionRowIdx.value = cellAddress.row;
 				state.value = 'rowSelecting';
 
-				rootEl.value?.focus();
+				// フォーカスを当てないとキーイベントが拾えないので
+				getCellElement(ev.target as HTMLElement)?.focus();
 			}
 			break;
 		}
@@ -552,6 +553,9 @@ function onMouseMove(ev: MouseEvent) {
 			expandCellRange(leftTop, rightBottom);
 			previousCellAddress.value = targetCellAddress;
 
+			// フォーカスを当てないとキーイベントが拾えないので
+			getCellElement(ev.target as HTMLElement)?.focus();
+
 			break;
 		}
 		case 'rowSelecting': {
@@ -579,6 +583,9 @@ function onMouseMove(ev: MouseEvent) {
 
 			previousCellAddress.value = targetCellAddress;
 
+			// フォーカスを当てないとキーイベントが拾えないので
+			getCellElement(ev.target as HTMLElement)?.focus();
+
 			break;
 		}
 	}
@@ -962,6 +969,9 @@ function refreshData() {
 function patchData(newItems: DataSource[]) {
 	const gridRows = cells.value;
 	if (gridRows.length > newItems.length) {
+		// 状態が壊れるかもしれないので選択を全解除
+		unSelectionRangeAll();
+
 		// 行数が減った場合
 		const diff = gridRows
 			.map((it, idx) => ({ origin: it.origin, idx }))
@@ -979,6 +989,9 @@ function patchData(newItems: DataSource[]) {
 			}
 		}
 	} else if (gridRows.length < newItems.length) {
+		// 状態が壊れるかもしれないので選択を全解除
+		unSelectionRangeAll();
+
 		// 行数が増えた場合
 		const oldOrigins = gridRows.map(it => it.origin);
 		const diff = newItems
diff --git a/packages/frontend/src/components/grid/MkNumberCell.vue b/packages/frontend/src/components/grid/MkNumberCell.vue
index 1678c4ba87..46a9037c13 100644
--- a/packages/frontend/src/components/grid/MkNumberCell.vue
+++ b/packages/frontend/src/components/grid/MkNumberCell.vue
@@ -1,5 +1,5 @@
 <template>
-<th :class="[$style.cell]">
+<th :class="[$style.cell]" tabindex="-1">
 	<div :class="[$style.root]">
 		{{ content }}
 	</div>
diff --git a/packages/frontend/src/components/grid/grid-utils.ts b/packages/frontend/src/components/grid/grid-utils.ts
index 99821fa530..b63caed8ae 100644
--- a/packages/frontend/src/components/grid/grid-utils.ts
+++ b/packages/frontend/src/components/grid/grid-utils.ts
@@ -43,6 +43,23 @@ export function getCellAddress(elem: HTMLElement, gridSetting: GridSetting, pare
 	return CELL_ADDRESS_NONE;
 }
 
+export function getCellElement(elem: HTMLElement, parentNodeCount = 10): HTMLTableCellElement | null {
+	let node = elem;
+	for (let i = 0; i < parentNodeCount; i++) {
+		if (isCellElement(node)) {
+			return node;
+		}
+
+		if (!node.parentElement) {
+			break;
+		}
+
+		node = node.parentElement;
+	}
+
+	return null;
+}
+
 export function equalCellAddress(a: CellAddress, b: CellAddress): boolean {
 	return a.row === b.row && a.col === b.col;
 }