fix focus
This commit is contained in:
parent
ca2da9d296
commit
bac10659e0
|
@ -135,7 +135,7 @@ watch(() => [cell.value.value], () => {
|
||||||
|
|
||||||
watch(() => cell.value.selected, () => {
|
watch(() => cell.value.selected, () => {
|
||||||
if (cell.value.selected) {
|
if (cell.value.selected) {
|
||||||
rootEl.value?.focus();
|
requestFocus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -151,8 +151,7 @@ function onCellDoubleClick(ev: MouseEvent) {
|
||||||
function onOutsideMouseDown(ev: MouseEvent) {
|
function onOutsideMouseDown(ev: MouseEvent) {
|
||||||
const isOutside = ev.target instanceof Node && !rootEl.value?.contains(ev.target);
|
const isOutside = ev.target instanceof Node && !rootEl.value?.contains(ev.target);
|
||||||
if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement))) {
|
if (isOutside || !equalCellAddress(cell.value.address, getCellAddress(ev.target as HTMLElement))) {
|
||||||
endEditing(true, editingValue.value);
|
endEditing(true, false);
|
||||||
editingValue.value = undefined;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -170,15 +169,13 @@ function onCellKeyDown(ev: KeyboardEvent) {
|
||||||
} else {
|
} else {
|
||||||
switch (ev.code) {
|
switch (ev.code) {
|
||||||
case 'Escape': {
|
case 'Escape': {
|
||||||
endEditing(false, editingValue.value);
|
endEditing(false, true);
|
||||||
editingValue.value = undefined;
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'NumpadEnter':
|
case 'NumpadEnter':
|
||||||
case 'Enter': {
|
case 'Enter': {
|
||||||
if (!ev.isComposing) {
|
if (!ev.isComposing) {
|
||||||
endEditing(true, editingValue.value);
|
endEditing(true, true);
|
||||||
editingValue.value = undefined;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -203,7 +200,7 @@ function unregisterOutsideMouseDown() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function beginEditing(target: HTMLElement) {
|
async function beginEditing(target: HTMLElement) {
|
||||||
if (editing.value || !cell.value.column.setting.editable) {
|
if (editing.value || !cell.value.selected || !cell.value.column.setting.editable) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -221,7 +218,7 @@ async function beginEditing(target: HTMLElement) {
|
||||||
emitValueChange(newValue);
|
emitValueChange(newValue);
|
||||||
}
|
}
|
||||||
|
|
||||||
rootEl.value?.focus();
|
requestFocus();
|
||||||
} else {
|
} else {
|
||||||
switch (cellType.value) {
|
switch (cellType.value) {
|
||||||
case 'number':
|
case 'number':
|
||||||
|
@ -249,11 +246,14 @@ async function beginEditing(target: HTMLElement) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function endEditing(applyValue: boolean, newValue: CellValue) {
|
function endEditing(applyValue: boolean, requireFocus: boolean) {
|
||||||
if (!editing.value) {
|
if (!editing.value) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const newValue = editingValue.value;
|
||||||
|
editingValue.value = undefined;
|
||||||
|
|
||||||
emit('operation:endEdit', cell.value);
|
emit('operation:endEdit', cell.value);
|
||||||
unregisterOutsideMouseDown();
|
unregisterOutsideMouseDown();
|
||||||
|
|
||||||
|
@ -263,7 +263,15 @@ function endEditing(applyValue: boolean, newValue: CellValue) {
|
||||||
|
|
||||||
editing.value = false;
|
editing.value = false;
|
||||||
|
|
||||||
rootEl.value?.focus();
|
if (requireFocus) {
|
||||||
|
requestFocus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestFocus() {
|
||||||
|
nextTick(() => {
|
||||||
|
rootEl.value?.focus();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function emitValueChange(newValue: CellValue) {
|
function emitValueChange(newValue: CellValue) {
|
||||||
|
|
|
@ -81,16 +81,9 @@ class ValidatorPreset {
|
||||||
regex(pattern: RegExp): GridCellValidator {
|
regex(pattern: RegExp): GridCellValidator {
|
||||||
return {
|
return {
|
||||||
name: 'regex',
|
name: 'regex',
|
||||||
validate: ({ value, column }): ValidatorResult => {
|
validate: ({ value }): ValidatorResult => {
|
||||||
if (column.setting.type !== 'text') {
|
|
||||||
return {
|
|
||||||
valid: false,
|
|
||||||
message: i18n.ts._gridComponent._error.columnTypeNotSupport,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
valid: pattern.test(value?.toString() ?? ''),
|
valid: (typeof value !== 'string') || pattern.test(value.toString() ?? ''),
|
||||||
message: i18n.tsx._gridComponent._error.patternNotMatch({ pattern: pattern.source }),
|
message: i18n.tsx._gridComponent._error.patternNotMatch({ pattern: pattern.source }),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
@ -580,7 +580,7 @@ async function refreshCustomEmojis() {
|
||||||
query: query,
|
query: query,
|
||||||
limit: limit,
|
limit: limit,
|
||||||
page: currentPage.value,
|
page: currentPage.value,
|
||||||
sortKeys: sortOrders.value.map(({ key, direction }) => `${direction}${key}`),
|
sortKeys: sortOrders.value.map(({ key, direction }) => `${direction}${key}` as any),
|
||||||
}),
|
}),
|
||||||
() => {
|
() => {
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue