fix: editor support keydown chinese #4847

Author: fangsmile

packages/vtable/src/edit/edit-manager.ts

@@ -66,7 +66,6 @@ export class EditManager {
         editCellTrigger === 'keydown' ||
         (Array.isArray(editCellTrigger) && editCellTrigger.includes('keydown'))
       ) {
-        console.log('click-cell', e);
         // const { col, row } = e;
         // this.beginTriggerEditCellMode = 'keydown';
         // const rect = this.table.getCellRangeRelativeRect(this.table.getCellRange(col, row));
@@ -114,7 +113,6 @@ export class EditManager {
           referencePosition.rect.height = rect.height + 1; // 这里的1应该根据单元格的borderWidth来定;
         }
         const editor = (this.table as ListTableAPI).getEditor(col, row);
-
         setTimeout(() => {
           // 为什么要加延时：因为这个SELECTED_CHANGED事件是pointerdown过来的，
           // 如果这里不加延时，会导致鼠标抬起pointerup的时候将table.getElement()元素设置成焦点，从而导致编辑器失去焦点（因为prepareEdit只是将editor的element设置pointerEvents为none）

packages/vtable/src/event/listener/container-dom.ts

@@ -47,20 +47,7 @@ export function bindContainerDomListener(eventManager: EventManager) {
   });
 
   // 监听键盘事件
-  handler.on(document.body, 'keydown', (e: KeyboardEvent) => {
-    const selectedRanges = table.stateManager.select.ranges;
-    const justOneCellSelected =
-      selectedRanges.length === 1 &&
-      selectedRanges[0].start.col === selectedRanges[0].end.col &&
-      selectedRanges[0].start.row === selectedRanges[0].end.row;
-    const editor =
-      justOneCellSelected &&
-      (table as ListTableAPI).getEditor(table.stateManager.select.cellPos.col, table.stateManager.select.cellPos.row);
-    const editorInput = editor?.getInputElement?.();
-
-    if (e.target !== table.getElement() && e.target !== editorInput) {
-      return;
-    }
+  handler.on(table.getElement(), 'keydown', (e: KeyboardEvent) => {
     // 键盘按下事件 内部逻辑处理前
     const beforeKeydownEvent: KeydownEvent = {
       keyCode: e.keyCode ?? e.which,
@@ -149,15 +136,14 @@ export function bindContainerDomListener(eventManager: EventManager) {
       if (isCellDisableSelect(table, targetCol, targetRow)) {
         return;
       }
+      const isEditingCell = !!(table as ListTableAPI).editorManager?.editingEditor;
+      // 下面这句completeEdit代码和selectCell代码顺序很重要，不能颠倒，否则会导致编辑器失去焦点（selectCell会触发到edit-manager的selected_changed事件，getEditor会创建editor实例并缓存，completeEdit会清空缓存）
+      (table as ListTableAPI).editorManager?.completeEdit();
+      table.getElement().focus();
       const enableShiftSelectMode = table.options.keyboardOptions?.shiftMultiSelect ?? true;
       table.selectCell(targetCol, targetRow, e.shiftKey && enableShiftSelectMode);
-      if (
-        (table.options.keyboardOptions?.moveEditCellOnArrowKeys ?? false) &&
-        (table as ListTableAPI).editorManager?.editingEditor
-      ) {
+      if ((table.options.keyboardOptions?.moveEditCellOnArrowKeys ?? false) && isEditingCell) {
         // 开启了方向键切换编辑单元格  并且当前已经在编辑状态下 切换到下一个需先退出再进入下个单元格的编辑
-        (table as ListTableAPI).editorManager?.completeEdit();
-        table.getElement().focus();
         if ((table as ListTableAPI).getEditor(targetCol, targetRow)) {
           (table as ListTableAPI).editorManager?.startEditCell(targetCol, targetRow);
         }
@@ -238,10 +224,12 @@ export function bindContainerDomListener(eventManager: EventManager) {
           if (isCellDisableSelect(table, targetCol, targetRow)) {
             return;
           }
+          const isEditingCell = !!(table as ListTableAPI).editorManager?.editingEditor;
+          // 下面这句completeEdit代码和selectCell代码顺序很重要，不能颠倒，否则会导致编辑器失去焦点（selectCell会触发到edit-manager的selected_changed事件，getEditor会创建editor实例并缓存，completeEdit会清空缓存）
+          (table as ListTableAPI).editorManager?.completeEdit();
+          table.getElement().focus();
           table.selectCell(targetCol, targetRow);
-          if ((table as ListTableAPI).editorManager?.editingEditor) {
-            (table as ListTableAPI).editorManager?.completeEdit();
-            table.getElement().focus();
+          if (isEditingCell) {
             if ((table as ListTableAPI).getEditor(targetCol, targetRow)) {
               (table as ListTableAPI).editorManager?.startEditCell(targetCol, targetRow);
             }
@@ -250,6 +238,11 @@ export function bindContainerDomListener(eventManager: EventManager) {
       }
     } else if (!(e.ctrlKey || e.metaKey)) {
       const editCellTrigger = (table.options as ListTableConstructorOptions).editCellTrigger;
+      const selectedRanges = table.stateManager.select.ranges;
+      const justOneCellSelected =
+        selectedRanges.length === 1 &&
+        selectedRanges[0].start.col === selectedRanges[0].end.col &&
+        selectedRanges[0].start.row === selectedRanges[0].end.row;
       if (justOneCellSelected) {
         if (
           (editCellTrigger === 'keydown' || (Array.isArray(editCellTrigger) && editCellTrigger.includes('keydown'))) &&