form Electron app: Form fields become disabled after deletion on Windows, but work fine on Mac after form submission

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}`));
    });
}

Delete

Add -> form tags not editable on Windows ! (but oK on MAC