I’m experiencing an issue with my Electron app when executed on Windows that doesn’t occur on macOS. It’s built as a desktop app. Here’s the problem:
When I click the “Delete” button to remove a “transporter” then I click on the “Add button”, all form fields become disabled (can’t edit anything in this form or any other form of the app -> No focus !). Just to mention that DELETION IS DONE !!! No problem with the delete in sqlite db.
the fields remain inaccessible BUT if I minimize the Electron window and then maximize it again, the fields become accessible when I click “Add” !!!! .
This issue only occurs on Windows; the app works perfectly on macOS.
I’ve tried several approaches to resolve this, including:
- Forcing focus on form fields after deletion
- Resetting the form
- Checking for event listeners that might interfere
- Logging to the console to track the application’s behavior
None of these attempts have solved the issue. I’m at a loss as to why this is happening only on Windows and why minimizing and maximizing the window seems to temporarily fix the problem.
Has anyone encountered a similar issue or can suggest a way to debug this platform-specific behavior in Electron?
Here’s a simplified version of my deletion function:
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
});
}
};
loadManageData() in Renderer.js
function loadManageData() {
console.log('loadManageData start');
Promise.all([
window.electronAPI.getTransporters(),
window.electronAPI.getDestinations()
])
.then(([transporters, destinations]) => {
console.log('Data retrieved and reloaded');
updateTransporterList(transporters);
updateDestinationList(destinations);
console.log('UI updated');
// Force a complete rerender
///document.body.style.display = 'none';
setTimeout(() => {
document.body.style.display = '';
console.log('Re-rendu forcé');
// Reactivate all fields
enableAllFormFields();
checkEventListeners();
}, 100);
})
.catch(error => {
console.error('Problem to load data', error);
showNotification('Problem to load data", 'error');
});
}
EnableAllFormFields in renderer.js
// Function to reactivate all fields
function enableAllFormFields() {
console.log('Début de enableAllFormFields');
const forms = document.querySelectorAll('form');
forms.forEach((form, formIndex) => {
const fields = form.querySelectorAll('input, select, textarea, button');
fields.forEach(field => {
if (field) {
field.disabled = false; // Reactivate all tags and all fields
console.log(`Activated element: ${field.id || field.name || 'Without name'}, type: ${field.type}`);
} else {
console.warn('Element not defined');
}
});
});
console.log('Fin de enableAllFormFields');
}
CheckEventListeners in Renderer.js
function checkEventListeners() {
const elements = document.querySelectorAll('button, input, select, textarea');
elements.forEach(el => {
el.addEventListener('click', () => console.log(`Click on ${el.id || el.className}`));
el.addEventListener('focus', () => console.log(`Focus on ${el.id || el.className}`));
});
}