1- import type { CellAddress , EditContext , IEditor , RectProps } from './types' ;
1+ import type { CellAddress , EditContext , IEditor , PrepareEditContext , RectProps } from './types' ;
22import type { ValidateEnum } from './types' ;
33
44export interface InputEditorConfig {
@@ -14,10 +14,12 @@ export class InputEditor implements IEditor {
1414 table ?: any ;
1515 col ?: number ;
1616 row ?: number ;
17-
1817 constructor ( editorConfig ?: InputEditorConfig ) {
1918 this . editorConfig = editorConfig ;
2019 }
20+ getInputElement ( ) : HTMLInputElement {
21+ return this . element ;
22+ }
2123
2224 createElement ( ) {
2325 const input = document . createElement ( 'input' ) ;
@@ -40,9 +42,15 @@ export class InputEditor implements IEditor {
4042 input . style . outline = 'none' ;
4143 } ) ;
4244
43- input . addEventListener ( 'blur' , ( ) => {
45+ input . addEventListener ( 'blur' , e => {
4446 input . style . borderColor = '#d9d9d9' ;
4547 // input.style.boxShadow = 'none';
48+ if ( this . table && this . element . style . opacity === '0' ) {
49+ const selectCell = this . table . stateManager . select . cellPos ;
50+ if ( selectCell . col !== this . col || selectCell . row !== this . row ) {
51+ this . onEnd ( ) ;
52+ }
53+ }
4654 } ) ;
4755 // #endregion
4856 this . element = input ;
@@ -69,7 +77,31 @@ export class InputEditor implements IEditor {
6977 getValue ( ) {
7078 return this . element . value ;
7179 }
72-
80+ /**
81+ * 如果表格编辑时机配置editCellTrigger为keydown,则需要调用prepareEdit来准备编辑环境,否则中文输入法第一个字符会被当做英文字符
82+ * @param param0
83+ */
84+ prepareEdit ( { referencePosition, container, table, col, row } : PrepareEditContext < string > ) {
85+ this . container = container ;
86+ this . table = table ;
87+ this . col = col ;
88+ this . row = row ;
89+ const selectCell = this . table . stateManager . select . cellPos ;
90+ if ( selectCell . col !== this . col || selectCell . row !== this . row ) {
91+ return ;
92+ }
93+ if ( ! this . element ) {
94+ this . createElement ( ) ;
95+ }
96+ this . element . style . opacity = '0' ;
97+ //这个pointerEvents = 'none'很重要,如果没有的话会引起vtable.getElement()元素和这里的element元素的focus和blur的切换,
98+ //也会引起mouseleave_table mouseleave_cell和mouseenter的切换
99+ this . element . style . pointerEvents = 'none' ;
100+ if ( referencePosition ?. rect ) {
101+ this . adjustPosition ( referencePosition . rect ) ;
102+ }
103+ this . element . focus ( ) ;
104+ }
73105 onStart ( { value, referencePosition, container, endEdit, table, col, row } : EditContext < string > ) {
74106 this . container = container ;
75107 this . successCallback = endEdit ;
@@ -78,14 +110,16 @@ export class InputEditor implements IEditor {
78110 this . row = row ;
79111 if ( ! this . element ) {
80112 this . createElement ( ) ;
81-
82- if ( value !== undefined && value !== null ) {
83- this . setValue ( value ) ;
84- }
85113 if ( referencePosition ?. rect ) {
86114 this . adjustPosition ( referencePosition . rect ) ;
87115 }
88116 }
117+ if ( value !== undefined && value !== null ) {
118+ this . setValue ( value ) ;
119+ }
120+ //防止调用过prepareEdit 后,元素的显示和可操作性被影响
121+ this . element . style . opacity = '1' ;
122+ this . element . style . pointerEvents = 'auto' ;
89123 this . element . focus ( ) ;
90124 // do nothing
91125 }
@@ -112,8 +146,8 @@ export class InputEditor implements IEditor {
112146 // do nothing
113147 if ( this . container ?. contains ( this . element ) ) {
114148 this . container . removeChild ( this . element ) ;
149+ this . element = undefined ;
115150 }
116- this . element = undefined ;
117151 }
118152
119153 isEditorElement ( target : HTMLElement ) {
0 commit comments