From c1c5fc978b5be43067c3bae28d13afaaeacb9ac5 Mon Sep 17 00:00:00 2001
From: AprilNEA <github@sku.moe>
Date: Mon, 30 Sep 2024 08:35:49 +0000
Subject: [PATCH] fix: fix number convert when string empty

---
 .../advanced/ports/update-port.tsx            | 20 ++---------
 .../application/domains/add-domain.tsx        |  7 ++--
 .../dashboard/compose/domains/add-domain.tsx  |  7 ++--
 apps/dokploy/components/ui/input.tsx          | 35 ++++++++++++++++++-
 4 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx b/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx
index a068ce18..5ad25ed7 100644
--- a/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx
@@ -17,7 +17,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -125,7 +125,7 @@ export const UpdatePort = ({ portId }: Props) => {
 									<FormItem>
 										<FormLabel>Published Port</FormLabel>
 										<FormControl>
-											<Input
+											<NumberInput
 												placeholder="1-65535"
 												{...field}
 												value={field.value?.toString() || ""}
@@ -134,10 +134,7 @@ export const UpdatePort = ({ portId }: Props) => {
 													if (value === "") {
 														field.onChange(0);
 													} else {
-														const number = Number.parseInt(value, 10);
-														if (!Number.isNaN(number)) {
-															field.onChange(number);
-														}
+														field.onChange(parseInt(value, 10));
 													}
 												}}
 											/>
@@ -158,17 +155,6 @@ export const UpdatePort = ({ portId }: Props) => {
 												placeholder="1-65535"
 												{...field}
 												value={field.value?.toString() || ""}
-												onChange={(e) => {
-													const value = e.target.value;
-													if (value === "") {
-														field.onChange(0);
-													} else {
-														const number = Number.parseInt(value, 10);
-														if (!Number.isNaN(number)) {
-															field.onChange(number);
-														}
-													}
-												}}
 											/>
 										</FormControl>
 
diff --git a/apps/dokploy/components/dashboard/application/domains/add-domain.tsx b/apps/dokploy/components/dashboard/application/domains/add-domain.tsx
index 7ab67a29..79c54715 100644
--- a/apps/dokploy/components/dashboard/application/domains/add-domain.tsx
+++ b/apps/dokploy/components/dashboard/application/domains/add-domain.tsx
@@ -18,7 +18,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -228,12 +228,9 @@ export const AddDomain = ({
 											<FormItem>
 												<FormLabel>Container Port</FormLabel>
 												<FormControl>
-													<Input
+													<NumberInput
 														placeholder={"3000"}
 														{...field}
-														onChange={(e) => {
-															field.onChange(Number.parseInt(e.target.value));
-														}}
 													/>
 												</FormControl>
 												<FormMessage />
diff --git a/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx b/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx
index 91f211d1..e3526db5 100644
--- a/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx
+++ b/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx
@@ -18,7 +18,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -364,12 +364,9 @@ export const AddDomainCompose = ({
 											<FormItem>
 												<FormLabel>Container Port</FormLabel>
 												<FormControl>
-													<Input
+													<NumberInput
 														placeholder={"3000"}
 														{...field}
-														onChange={(e) => {
-															field.onChange(Number.parseInt(e.target.value));
-														}}
 													/>
 												</FormControl>
 												<FormMessage />
diff --git a/apps/dokploy/components/ui/input.tsx b/apps/dokploy/components/ui/input.tsx
index 55b46e6d..d8b94c79 100644
--- a/apps/dokploy/components/ui/input.tsx
+++ b/apps/dokploy/components/ui/input.tsx
@@ -31,4 +31,37 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = "Input";
 
-export { Input };
+const NumberInput = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, errorMessage, ...props }, ref) => {
+		return (
+			<Input
+				type="text"
+				className={cn("text-left", className)}
+				ref={ref}
+				{...props}
+				onChange={(e) => {
+					const value = e.target.value;
+					if (value === "") {
+						props.onChange?.(e);
+					} else {
+						const number = Number.parseInt(value, 10);
+						if (!Number.isNaN(number)) {
+							const syntheticEvent = {
+								...e,
+								target: {
+									...e.target,
+									value: number.toString(),
+								},
+							};
+							props.onChange?.(syntheticEvent as React.ChangeEvent<HTMLInputElement>);
+						}
+					}
+				}}
+			/>
+		);
+	}
+);
+NumberInput.displayName = "NumberInput";
+
+
+export { Input, NumberInput };