Electron应用Windows端删除操作后表单字段禁用问题求助

问题现象 #

开发的Electron桌面应用在Windows平台存在macOS没有的异常：点击「Delete」按钮删除transporter后，点击「Add」按钮，所有表单字段会被禁用（无法编辑、无法获取焦点），但SQLite数据库的删除操作已成功执行。
该问题仅在Windows端出现，将Electron窗口最小化再最大化后，点击「Add」按钮时表单字段可恢复正常。

已尝试无效方案 #

• 删除后强制聚焦表单字段
• 重置表单
• 检查可能冲突的事件监听器
• 控制台日志追踪应用行为

相关代码片段 #

Main.js（主进程删除逻辑） #

ipcMain.handle('deleteTransporter', async (event, id) => {
  const sql = `DELETE FROM transporters WHERE id = ?`;
  return new Promise((resolve, reject) => {
    db.run(sql, [id], function(err) {
      if (err) {
        console.error('Error deleting transporter:', err);
        reject(err);
      } else {
        console.log(`Transporter with ID ${id} deleted.`);
        resolve(this.changes);
      }
    });
  });
});

Renderer.js（渲染进程删除逻辑） #

// Deletion
window.deleteTransporter = function (id) {
    if (confirm('Are you sure you want to delete this ?')) {
        window.electronAPI.deleteTransporter(id)
            .then(() => {
                showNotification('Deleted successfully', 'success');
                return loadManageData();  // Reload data after submission
            })
            .then(() => {
                enableAllFormFields(); 
                resetFormState();
                rafraichirInterface();
                logFormFieldsState();
            })
            .catch(error => {
                console.error('Deletion error:', error);
                showNotification('Deletion error', 'error');
                rafraichirInterface();  // Refresh UI
            });
    }
};

调试与解决建议 #

1. 强制触发窗口重绘：Windows平台下Electron的UI渲染偶尔会出现更新滞后，可在rafraichirInterface函数末尾添加重绘触发逻辑，比如调用document.body.offsetHeight（触发浏览器重排），或者通过主进程API强制刷新：

// 渲染进程中新增触发请求
window.electronAPI.invoke('trigger-window-repaint');
// 主进程添加对应处理
ipcMain.handle('trigger-window-repaint', (event) => {
  event.sender.getOwnerBrowserWindow().webContents.invalidate();
});

2. 修复窗口聚焦问题：删除操作弹出的confirm弹窗可能导致Windows窗口失去焦点，后续表单状态更新未绑定到活跃窗口。可在删除成功后强制将焦点放回主窗口：

// 渲染进程删除成功回调中添加
window.focus();

3. 调整DOM更新时机：将表单启用、重置等操作包裹在requestAnimationFrame中，确保在浏览器下一帧渲染周期执行，避免异步操作导致的DOM更新不及时：

.then(() => {
  requestAnimationFrame(() => {
    enableAllFormFields(); 
    resetFormState();
    rafraichirInterface();
    logFormFieldsState();
  });
})

4. 排查平台特定逻辑：检查enableAllFormFields等函数中是否存在基于process.platform的分支判断，确保Windows下表单字段的disabled属性被正确设置为false，没有遗漏或逻辑错误。

5. Electron版本适配：尝试升级Electron到最新稳定版，或降级到已知无类似UI渲染bug的版本——Windows和macOS的Chromium内核实现差异可能导致版本特定问题。

内容的提问来源于stack exchange，提问作者amin89