diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index a13498da..84fe7c53 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -56,6 +56,17 @@ export type Props = { runtimeFeatureFlags: RuntimeFeatureFlags } +const enforceCurrencyPattern = (value: string) => + value + // replace first comma with # + .replace(/[.,]/, '#') + // remove all other commas + .replace(/[.,]/g, '') + // change back # to dot + .replace(/#/, '.') + // remove all non-numeric and non-dot characters + .replace(/[^\d.]/g, '') + export function ExpenseForm({ group, expense, @@ -210,18 +221,22 @@ export function ExpenseForm({ ( + render={({ field: { onChange, ...field } }) => ( Amount
{group.currency} + onChange(enforceCurrencyPattern(event.target.value)) + } onClick={(e) => e.currentTarget.select()} {...field} /> @@ -428,7 +443,7 @@ export function ExpenseForm({ ), )} className="text-base w-[80px] -my-2" - type="number" + type="text" disabled={ !field.value?.some( ({ participant }) => @@ -448,7 +463,9 @@ export function ExpenseForm({ ? { participant: id, shares: - event.target.value, + enforceCurrencyPattern( + event.target.value, + ), } : p, ), diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index d68adf46..52b0d0da 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -51,8 +51,7 @@ export const expenseFormSchema = z [ z.number(), z.string().transform((value, ctx) => { - const normalizedValue = value.replace(/,/g, '.') - const valueAsNumber = Number(normalizedValue) + const valueAsNumber = Number(value) if (Number.isNaN(valueAsNumber)) ctx.addIssue({ code: z.ZodIssueCode.custom,