ZK-5647: Wrong groupbox layout on touch screen

zk/src/main/resources/web/js/zk/zk.ts

@@ -859,9 +859,31 @@ function override<T extends () => void, U> (dst: T, backup: Record<string, unkno
 		dst[backup] = src;
 		return dst;
 	}
-	for (var nm in src) {
-		backup[nm] = dst[nm as string];
-		dst[nm as string] = src[nm];
+	if (typeof dst['$init'] == 'function') {
+		const props = {};
+		for (var nm in src) {
+			backup[nm] = dst[nm as string];
+			dst[nm as string] = src[nm];
+			if (backup[nm] == undefined && typeof dst[nm as string] != 'function') {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+				props[nm as string] = dst[nm as string];
+			}
+		}
+		if (Object.keys(props).length) {
+			const oldInit = dst['$init'] as unknown as CallableFunction;
+			dst['$init'] = function (...args: unknown[]) {
+				oldInit.bind(this)(...args);
+				// try to apply the properties again
+				for (var nm in props) {
+					this[nm] = props[nm] as never;
+				}
+			};
+		}
+	} else {
+		for (var nm in src) {
+			backup[nm] = dst[nm as string];
+			dst[nm as string] = src[nm];
+		}
 	}
 	return dst;
 }
@@ -898,9 +920,30 @@ _zk.override = override;
  */
 _zk.augment = function<D extends Pick<S, keyof D & keyof S>, S> (dst: D, src: S & Pick<D, keyof D & keyof S> & ThisType<D & S>) {
 	const backup = {} as Pick<D, keyof D & keyof S>;
-	for (const nm in src) {
-		backup[nm] = dst[nm as keyof D];
-		dst[nm] = src[nm as keyof S];
+	if (typeof dst['$init'] == 'function') {
+		const props = {} as Pick<D, keyof D & keyof S>;
+		for (var nm in src) {
+			backup[nm] = dst[nm as keyof D];
+			dst[nm] = src[nm as keyof S];
+			if (backup[nm] == undefined && typeof dst[nm as keyof D] != 'function') {
+				props[nm as never] = dst[nm as keyof D] as never;
+			}
+		}
+		if (Object.keys(props).length) {
+			const oldInit = dst['$init'] as unknown as CallableFunction;
+			dst['$init'] = function (...args: unknown[]) {
+				oldInit.bind(this)(...args);
+				// try to apply the properties again
+				for (var nm in props) {
+					this[nm] = props[nm] as never;
+				}
+			};
+		}
+	} else {
+		for (const nm in src) {
+			backup[nm] = dst[nm as keyof D];
+			dst[nm] = src[nm as keyof S];
+		}
 	}
 	return backup;
 };

zkdoc/release-note

@@ -42,6 +42,7 @@ ZK 10.0.0
   ZK-4355: timebox' default cols is too small
   ZK-5611: Executions.schedule() might fail if it's called by multiple threads
   ZK-5639: stepbox wrong color update
+  ZK-5647: Wrong groupbox layout on touch screen
 
 * Upgrade Notes
   + Upgrade commons-fileupload to commons-fileupload2-javax 2.0.0-M2 and commons-io to 2.13.0 to support jakarta-friendly uploads

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

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+B100-ZK-5647.zul
+
+        Purpose:
+
+        Description:
+
+        History:
+                Fri Feb 16 13:21:29 CST 2024, Created by rebeccalai
+
+Copyright (C) 2024 Potix Corporation. All Rights Reserved.
+-->
+<zk>
+	<label multiline="true">
+		1. open the page on touch screen
+		2. the mold of the groupbox should be 3d
+	</label>
+	<groupbox id="root" open="false" width="420px">
+		<caption label="Click me to open the groupbox" />
+		<grid fulfill="root.onOpen">
+			<columns>
+				<column label="Feature" hflex="1" />
+				<column label="Benefits" hflex="3" />
+			</columns>
+			<rows>
+				<row>
+					<label value="Create On Demand" />
+					<label value="Components are created only when they are needed,
+				saving both memory and rendering time." />
+				</row>
+			</rows>
+		</grid>
+	</groupbox>
+	The grid will be created when the open the content of groupbox
+</zk>

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

@@ -3121,6 +3121,7 @@ B90-ZK-4431.zul=A,E,Multislider
 ##zats##B100-ZK-5480.zul=A,E,cascader,selection,label
 ##zats##B100-ZK-4355.zul=A,E,timebox,col,default
 ##zats##B100-ZK-5639.zul=A,E,ForEach,If,Apply,MVVM,Shadow,Bindings,ZKDiffer
+##manually##B100-ZK-5647.zul=A,E,groupbox,mold,touch
 
 ##
 # Features - 3.0.x version