Pass onChange for ZSFieldSlot

kirankunigiri · Dec 2, 2024 · 1e4572c · 1e4572c
1 parent 963a4bf
commit 1e4572c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/example-client/src/routes/rooms/$id.tsx b/example-client/src/routes/rooms/$id.tsx
@@ -52,7 +52,14 @@ const ZenstackTest = () => {
 	return (
 		<>
 			{/* A placeholder example. This gets replaced by an input component */}
-			<ZSFieldSlot className="grow" fieldName={roomFields.description} />
+			{/* You can also pass custom class and event handlers if needed */}
+			<ZSFieldSlot
+				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+					console.log('onChange', event.target.value);
+				}}
+				className="grow"
+				fieldName={roomFields.description}
+			/>
 
 			{/* A custom element example. This will be directly used by the form */}
 			<ZSCustomField fieldName={roomFields.aiSummary}>

diff --git a/package/package.json b/package/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "zenstack-ui",
 	"description": "Customizable react components for zenstack (forms/lists/etc.)",
-	"version": "0.0.13",
+	"version": "0.0.14",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/kirankunigiri/zenstack-ui",

diff --git a/package/src/form/form.tsx b/package/src/form/form.tsx
@@ -380,6 +380,7 @@ const ZSBaseForm = (props: ZSBaseFormProps) => {
 					return element;
 				}
 
+				// Replace customElement with ZSFormInputInternal
 				return (
 					<ZSFormInputInternal
 						key={fieldName}
@@ -400,12 +401,14 @@ const ZSBaseForm = (props: ZSBaseFormProps) => {
 					return element;
 				}
 
+				// Replace ZSFieldSlot with ZSFormInputInternal
 				return (
 					<ZSFormInputInternal
 						key={fieldName}
 						field={field}
 						index={-1}
 						className={element.props.className}
+						onChange={element.props.onChange}
 						{...props}
 					/>
 				);
@@ -494,7 +497,7 @@ interface ZenstackFormInputProps extends ZSBaseFormProps {
 	field: Field
 	index: number
 	customElement?: React.ReactElement
-	className?: string
+	onChange?: (event: any) => void
 }
 
 // Change from regular component to memoized component
@@ -627,6 +630,8 @@ const ZSFormInputInternal = React.memo((props: ZenstackFormInputProps) => {
 
 		// Call custom element's onChange if it exists
 		if (props.customElement?.props.onChange) props.customElement.props.onChange(event);
+		// Call ZSFieldSlot's onChange if it exists
+		if (props.onChange) props.onChange(event);
 
 		// Call original onChange
 		props.form.getInputProps(fieldName).onChange(event);