ZK-5037: invisible first column hides checkmarks in a listbox

zkdoc/release-note

@@ -8,6 +8,7 @@ ZK 10.0.0
   ZK-5579: Listbox always renders the same set of items under ROD enabled
   ZK-5582: Listbox only renders 50 items with client mvvm
   ZK-5476: client mvvm failed for a tree
+  ZK-5037: invisible first column hides checkmarks in a listbox
   ZK-5535: TrackerImplEx#removeAllReference accesses map value by iteration instead of key, lowers performance
 
 * Upgrade Notes

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

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+B100-ZK-5037.zul
+
+        Purpose:
+
+        Description:
+
+        History:
+                Wed Nov 29 17:22:14 CST 2023, Created by rebeccalai
+
+Copyright (C) 2023 Potix Corporation. All Rights Reserved.
+-->
+<zk>
+	<label multiline="true">
+		1. checkmarks are placed in the country column (if bug exists then cannot see any checkmarks)
+		2. click the toggle visibility of name column button, checkmarks are moved to the name column
+		2. click the toggle visibility of name column button, checkmarks are moved to the country column
+	</label>
+	<zscript><![CDATA[
+		ListModelList model = new ListModelList(Locale.getAvailableLocales());
+		model.setMultiple(true);
+	]]></zscript>
+	<button label="toggle visibility of name column" onClick="name.visible=!name.visible"/>
+	<listbox id="lb" apply="org.zkoss.bind.BindComposer" multiple="true" checkmark="true" model="@load(model)" height="400px">
+		<listhead sizable="true" menupopup="auto">
+			<listheader id="name" label="name" visible="false"/>
+			<listheader label="country"/>
+			<listheader label="lang"/>
+		</listhead>
+		<template name="model" >
+			<listitem >
+				<listcell label="@init(each.displayName)" />
+				<listcell label="@init(each.country)" />
+				<listcell label="@init(each.language)" />
+			</listitem>
+		</template>
+	</listbox>
+</zk>

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

@@ -3161,6 +3161,7 @@ B90-ZK-4431.zul=A,E,Multislider
 ##zats##B100-ZK-5035.zul=A,E,Listbox,Column,AddChild,Checkmark
 ##zats##B100-ZK-5453.zul=A,E,Chosenbox,XSS
 ##zats##B100-ZK-5025.zul=A,E,Menu,Menupopup,Menuitem,focus,hover
+##zats##B100-ZK-5037.zul=A,E,Listbox,Listheader,Checkmark,invisible
 ##zats##B100-ZK-5393.zul=A,E,FileUpload,JakartaEE
 ##zats##B100-ZK-5535.zul=A,E,performance,tree,mvvm,trackerNode,treeModel
 

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

@@ -0,0 +1,45 @@
+/* B100_ZK_5037Test.java
+
+        Purpose:
+
+        Description:
+
+        History:
+                Thu Nov 30 15:24:57 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;
+import org.zkoss.test.webdriver.ztl.JQuery;
+
+public class B100_ZK_5037Test extends WebDriverTestCase {
+	@Test
+	public void test() {
+		connect();
+		waitResponse();
+		click(jq(".z-listitem-checkable")); // if original bug exists then invisible checkmarks not clickable
+		waitResponse();
+		jq(".z-listitem-checkable").forEach(checkmark -> assertEquals(getCheckmarkColumnIndex(checkmark), 1));
+		click(jq("@button"));
+		waitResponse();
+		jq(".z-listitem-checkable").forEach(checkmark -> assertEquals(getCheckmarkColumnIndex(checkmark), 0));
+		click(jq("@button"));
+		waitResponse();
+		jq(".z-listitem-checkable").forEach(checkmark -> assertEquals(getCheckmarkColumnIndex(checkmark), 1));
+	}
+
+	private int getCheckmarkColumnIndex(JQuery checkmark) {
+		int columnIndex;
+		JQuery current = checkmark.parent().parent();
+		for (columnIndex = 0; current.prev().exists() ; columnIndex++)
+			current = current.prev();
+		return columnIndex;
+	}
+}

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

@@ -159,12 +159,21 @@ export class Listcell extends zul.LabelImageWidget<HTMLTableCellElement> {
 		super.clearCache();
 	}
 
+	/** @internal */
+	_isFirstVisibleChild(): boolean {
+		let firstVisibleChild = this.parent!.firstChild;
+		while (firstVisibleChild && !firstVisibleChild.isVisible())
+			firstVisibleChild = firstVisibleChild.nextSibling;
+		return this == firstVisibleChild;
+	}
+
 	/** @internal */
 	_colHtmlPre(): string {
 		var s = '',
 			box = this.getListbox(),
 			p = this.parent!;
-		if (box != null && p.firstChild == this) {
+		// ZK-5037: invisible first column hides checkmarks in a listbox
+		if (box != null && (this.getListheader() ?? this)._isFirstVisibleChild()) {
 			var isGrp = _isListgroup(p);
 			// insert checkmark
 			//B70-ZK-2053:make sure checkmark won't display on multiple listgroup

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

@@ -327,10 +327,18 @@ export class Listheader extends zul.mesh.SortWidget {
 		return s;
 	}
 
+	/** @internal */
+	_isFirstVisibleChild(): boolean {
+		let firstVisibleChild = this.parent!.firstChild;
+		while (firstVisibleChild && !firstVisibleChild.isVisible())
+			firstVisibleChild = firstVisibleChild.nextSibling;
+		return this == firstVisibleChild;
+	}
+
 	/** @internal */
 	_hasCheckbox(): boolean {
 		var box = this.getListbox();
-		return !!(box != null && this.parent!.firstChild == this
+		return !!(box != null && this._isFirstVisibleChild() // B100-ZK-5037
 			&& box._checkmark && box._multiple && !box._listbox$noSelectAll);  // B50-ZK-873
 	}