Checkboxs on the frontend do not work on Chrome when the UI language is not English

[w568w]

Expected Behavior

When toggling checkboxes on the frontend page, the corresponding settings should be updated accordingly.

Actual Behavior

The local storage is never updated with the new value.

Steps to Reproduce

1. open the frontend; navigate to Generate tab page.
2. toggle the checkbox at the top-right popup of the page, such as Auto Clear Batch.
3. check the local storage by running localStorage.getItem('autoClearBatch'), which always returns the same value.

Debug Logs

N/A; it is a frontend bug.

Other

I believe this stems from the line 51 below:

SwarmUI/src/wwwroot/js/genpage/main.js

Lines 46 to 52 in b7a287c

	/** Reference to the auto-clear-batch toggle checkbox. */
	let autoClearBatchElem = getRequiredElementById('auto_clear_batch_checkbox');
	autoClearBatchElem.checked = localStorage.getItem('autoClearBatch') == 'true';
	/** Called when the user changes auto-clear-batch toggle to update local storage. */
	function toggleAutoClearBatch() {
	localStorage.setItem('autoClearBatch', `${autoClearBatchElem.checked}`);
	}

I log autoClearBatchElem.checked within toggleAutoClearBatch(), but it is always true (or false). However, if I replace the cached element with:

function toggleAutoClearBatch() { 
    localStorage.setItem('autoClearBatch', `${getRequiredElementById('auto_clear_batch_checkbox').checked}`); 
} 

It works correctly. So, the issue seems to be related to the cached element autoClearBatchElem? Could it be that these elements are recreated after the page loads, but main.js does not update the variables?

---

Browser: Brave v1.74.48 Chromium: 132.0.6834.83 64-bit
OS: Windows 11 24H2

[mcmonkey4eva]

I cannot replicate this at all, on either Firefox or Chrome. That's not an element that gets recreated ever.

[w568w]

I cannot replicate this at all, on either Firefox or Chrome. That's not an element that gets recreated ever.

That's strange. I can even reproduce it on a freshly installed Chrome/Firefox (without any extensions installed) in a Windows 10 VM.

I recorded a GIF to show you what happened here (click the Play button on the top-right corner to play it):

You can see a brief flicker in the DOM node tree when refreshing the page.

I am on the master branch of SwarmUI. Is there anything else I can provide?

[w568w]

Ah, looking back at the animation, it suddenly dawned on me that the rapid flickering is actually the translation loading. When I switch the UI language to English, the issue disappears.

I suspect it only occurs with other languages because loading the translated text seems to rebuild the element. Could you verify this? @mcmonkey4eva

[mcmonkey4eva]

aaahh I should've guessed translation would be involved. I knew it the moment I saw the screenshot with Chinese text instead of English. Indeed there was accidentally a translate wrapper around the html elem that should not have been there. Fixed!