fix number cell focus

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>
 

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

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>

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;
 }