fix: refs #6897 update input destruction logic to use async/await for better handling

src/components/VnTable/VnTable.vue

@@ -10,6 +10,7 @@ import {
     render,
     inject,
     useAttrs,
+    nextTick,
 } from 'vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
@@ -345,7 +346,7 @@ const clickHandler = async (event) => {
     if (isDateElement || isTimeElement || isQselectDropDown) return;
 
     if (clickedElement === null) {
-        destroyInput(editingRow.value, editingField.value);
+        await destroyInput(editingRow.value, editingField.value);
         return;
     }
     const rowIndex = clickedElement.getAttribute('data-row-index');
@@ -355,7 +356,7 @@ const clickHandler = async (event) => {
     if (editingRow.value !== null && editingField.value !== null) {
         if (editingRow.value == rowIndex && editingField.value == colField) return;
 
-        destroyInput(editingRow.value, editingField.value);
+        await destroyInput(editingRow.value, editingField.value);
     }
 
     if (isEditableColumn(column)) {
@@ -365,7 +366,7 @@ const clickHandler = async (event) => {
 
 async function handleTabKey(event, rowIndex, colField) {
     if (editingRow.value == rowIndex && editingField.value == colField)
-        destroyInput(editingRow.value, editingField.value);
+        await destroyInput(editingRow.value, editingField.value);
 
     const direction = event.shiftKey ? -1 : 1;
     const { nextRowIndex, nextColumnName } = await handleTabNavigation(
@@ -425,7 +426,7 @@ async function renderInput(rowId, field, clickedElement) {
                 await column?.cellEvent?.['update:modelValue']?.(value, oldValue, row);
             },
             keyup: async (event) => {
-                if (event.key === 'Enter') handleBlur(rowId, field, clickedElement);
+                if (event.key === 'Enter') await handleBlur(rowId, field, clickedElement);
             },
             keydown: async (event) => {
                 switch (event.key) {
@@ -434,7 +435,7 @@ async function renderInput(rowId, field, clickedElement) {
                         event.stopPropagation();
                         break;
                     case 'Escape':
-                        destroyInput(rowId, field, clickedElement);
+                        await destroyInput(rowId, field, clickedElement);
                         break;
                     default:
                         break;
@@ -456,12 +457,13 @@ async function renderInput(rowId, field, clickedElement) {
         node.el?.querySelector('span > div > div').focus();
 }
 
-function destroyInput(rowIndex, field, clickedElement) {
+async function destroyInput(rowIndex, field, clickedElement) {
     if (!clickedElement)
         clickedElement = document.querySelector(
             `[data-row-index="${rowIndex}"][data-col-field="${field}"]`,
         );
     if (clickedElement) {
+        await nextTick();
         render(null, clickedElement);
         Array.from(clickedElement.childNodes).forEach((child) => {
             child.style.visibility = 'visible';
@@ -473,8 +475,8 @@ function destroyInput(rowIndex, field, clickedElement) {
     editingField.value = null;
 }
 
-function handleBlur(rowIndex, field, clickedElement) {
-    destroyInput(rowIndex, field, clickedElement);
+async function handleBlur(rowIndex, field, clickedElement) {
+    await destroyInput(rowIndex, field, clickedElement);
 }
 
 async function handleTabNavigation(rowIndex, colName, direction) {