ZK-5035: Listbox renders duplicate checkmarks after adding 1st listheader dynamically

zkdoc/release-note

@@ -64,6 +64,7 @@ ZK 10.0.0
   ZK-5539: $init() will call twice on Keikai component
   ZK-5540: zk.wpd with browser condition won't work with ZK 10
   ZK-5530: users cannot focus on the icons on the Calendar header
+  ZK-5035: Listbox renders duplicate checkmarks after adding 1st listheader dynamically
   ZK-5453: XSS in chosenbox
 
 * Upgrade Notes

zktest/src/main/webapp/test2/B100-ZK-5035.zul

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+B100-ZK-5035.zul
+
+        Purpose:
+
+        Description:
+
+        History:
+                Thu Sep 07 13:18:53 CST 2023, Created by rebeccalai
+
+Copyright (C) 2023 Potix Corporation. All Rights Reserved.
+-->
+<zk>
+    <label multiline="true">
+        1. click the prepend 1st column dynamically button
+        2. only the 1st column has checkmarks (if bug exists then the 2nd column also has checkmarks)
+    </label>
+    <zscript><![CDATA[
+        ListModelList model = new ListModelList(Locale.getAvailableLocales());
+        String[] columnSettings = {"displayName", "country", "language"};
+        ListModelList visibleColumns = new ListModelList();
+        visibleColumns.addAll(Arrays.asList(columnSettings));
+    ]]></zscript>
+    <button label="prepend 1st column dynamically" onClick='visibleColumns.add(0, "displayCountry");'/>
+    <listbox id="lb" apply="org.zkoss.bind.BindComposer" multiple="true" checkmark="true" model="@load(model)" height="400px">
+        <listhead sizable="true" menupopup="auto">
+            <forEach items="@init(visibleColumns)">
+                <listheader label="@init(each)"/>
+            </forEach>
+        </listhead>
+        <template name="model" var="record">
+            <listitem >
+                <forEach items="@init(visibleColumns)">
+                    <listcell label="@init(record[each])"/>
+                </forEach>
+            </listitem>
+        </template>
+    </listbox>
+</zk>

zktest/src/main/webapp/test2/config.properties

@@ -3158,6 +3158,7 @@ B90-ZK-4431.zul=A,E,Multislider
 ##zats##B100-ZK-5468-Tabbox.zul=A,E,Model,Tabbox
 ##zats##B100-ZK-5468-Tree.zul=A,E,Model,Tree
 ##zats##B100-ZK-5235.zul=A,E,Menu,Menupopup,focus
+##zats##B100-ZK-5035.zul=A,E,Listbox,Column,AddChild,Checkmark
 ##zats##B100-ZK-5453.zul=A,E,Chosenbox,XSS
 
 ##

zktest/src/test/java/org/zkoss/zktest/zats/test2/B100_ZK_5035Test.java

@@ -0,0 +1,33 @@
+/* B100_ZK_5035Test.java
+
+		Purpose:
+
+		Description:
+
+		History:
+				Fri Sep 08 17:14:11 CST 2023, Created by rebeccalai
+
+Copyright (C) 2023 Potix Corporation. All Rights Reserved.
+*/
+package org.zkoss.zktest.zats.test2;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertFalse;
+
+import org.junit.jupiter.api.Test;
+
+import org.zkoss.test.webdriver.WebDriverTestCase;
+
+public class B100_ZK_5035Test extends WebDriverTestCase {
+	@Test
+	public void test() {
+		connect();
+		waitResponse();
+		int checkableBefore = jq(".z-listitem-checkable").length();
+		click(jq("@button"));
+		waitResponse();
+		int checkableAfter = jq(".z-listitem-checkable").length();
+		assertEquals(checkableBefore, checkableAfter);
+		jq(".z-listitem-checkable").forEach(item -> assertFalse(item.parent().parent().prev().exists()));
+	}
+}

zul/src/main/resources/web/js/zul/sel/Listcell.ts

@@ -170,6 +170,14 @@ export class Listcell extends zul.LabelImageWidget<HTMLTableCellElement> {
 			//B70-ZK-2053:make sure checkmark won't display on multiple listgroup
 			if (box.isCheckmark() && !_isListgroupfoot(p)
 				&& (!isGrp || (box.groupSelect && box.isMultiple()))) {
+				// ZK-5035: Remove the old checkmark to prevent duplicate checkmarks
+				const oldCm = this.parent?.$n('cm');
+				if (oldCm) {
+					oldCm.remove();
+					const nextSiblingCave = jq(this.nextSibling?.$n('cave'));
+					nextSiblingCave.html(nextSiblingCave.html().replace(/^&nbsp;/, ''));
+				}
+
 				var chkable = p.isSelectable(),
 					multi = box.isMultiple();
 				s += '<span id="' + p.uuid + '-cm" class="' + p.$s('checkable')