diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/expense-form.tsx | 25 |
1 files changed, 21 insertions, 4 deletions
diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index a13498d..84fe7c5 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({ <FormField control={form.control} name="amount" - render={({ field }) => ( + render={({ field: { onChange, ...field } }) => ( <FormItem className="sm:order-3"> <FormLabel>Amount</FormLabel> <div className="flex items-baseline gap-2"> <span>{group.currency}</span> <FormControl> <Input + {...field} className="text-base max-w-[120px]" - type="number" + type="text" inputMode="decimal" step={0.01} placeholder="0.00" + onChange={(event) => + 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, ), |