From e6911b00288d0838e8c6c761fbcf6d2d9f179fc6 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 26 Feb 2024 16:29:31 +0200 Subject: [PATCH 1/6] Revert 5b65b8f, fix comma issue with type="text" and onChange --- src/components/expense-form.tsx | 12 ++++++++++-- src/lib/schemas.ts | 3 +-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index a7e549c7..cb581736 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -217,12 +217,20 @@ export function ExpenseForm({ {group.currency} { + const value = event.target.value + const fixedValue = typeof value === "string" + ? value.replace(/,/g, '.') + : value + + return field.onChange(fixedValue) + }} /> 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, From 81d4830f2e3bb7a0107d8a574b793291ff044fdd Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 26 Feb 2024 16:35:10 +0200 Subject: [PATCH 2/6] Fix comma issue in "paid for" input --- src/components/expense-form.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index cb581736..c9e9755d 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -435,7 +435,7 @@ export function ExpenseForm({ ), )} className="text-base w-[80px] -my-2" - type="number" + type="text" disabled={ !field.value?.some( ({ participant }) => @@ -448,19 +448,23 @@ export function ExpenseForm({ participant === id, )?.shares } - onChange={(event) => - field.onChange( + onChange={(event) => { + const value = event.target.value + const fixedValue = typeof value === "string" + ? value.replace(/,/g, '.') + : value + + return field.onChange( field.value.map((p) => p.participant === id ? { participant: id, - shares: - event.target.value, + shares: fixedValue, } : p, ), ) - } + }} inputMode={ form.getValues().splitMode === 'BY_AMOUNT' From 6c87d1107dc1019a186f6d0d2200295592f8f4ee Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 26 Feb 2024 17:01:39 +0200 Subject: [PATCH 3/6] Run prettier autoformat --- src/components/expense-form.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index c9e9755d..f0f27be0 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -225,9 +225,10 @@ export function ExpenseForm({ placeholder="0.00" onChange={(event) => { const value = event.target.value - const fixedValue = typeof value === "string" - ? value.replace(/,/g, '.') - : value + const fixedValue = + typeof value === 'string' + ? value.replace(/,/g, '.') + : value return field.onChange(fixedValue) }} @@ -450,9 +451,10 @@ export function ExpenseForm({ } onChange={(event) => { const value = event.target.value - const fixedValue = typeof value === "string" - ? value.replace(/,/g, '.') - : value + const fixedValue = + typeof value === 'string' + ? value.replace(/,/g, '.') + : value return field.onChange( field.value.map((p) => From c34c90334686945d25fbcdbbebc5d347c6775d62 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Tue, 27 Feb 2024 12:54:20 +0200 Subject: [PATCH 4/6] Allow only digits and dots in currency inputs --- src/components/expense-form.tsx | 50 ++++++++++++++++----------------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index f0f27be0..eebdbabe 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -56,6 +56,18 @@ export type Props = { runtimeFeatureFlags: RuntimeFeatureFlags } +const enforceCurrencyPattern = ( + onChange: (value: string) => void, + value: string, +) => + onChange( + value + // replace commas with dots + .replace(/,/g, '.') + // remove all non-numeric and non-dot characters + .replace(/[^\d.]/g, ''), + ) + export function ExpenseForm({ group, expense, @@ -223,15 +235,12 @@ export function ExpenseForm({ inputMode="decimal" step={0.01} placeholder="0.00" - onChange={(event) => { - const value = event.target.value - const fixedValue = - typeof value === 'string' - ? value.replace(/,/g, '.') - : value - - return field.onChange(fixedValue) - }} + onChange={(event) => + enforceCurrencyPattern( + field.onChange, + event.target.value, + ) + } /> @@ -449,24 +458,13 @@ export function ExpenseForm({ participant === id, )?.shares } - onChange={(event) => { - const value = event.target.value - const fixedValue = - typeof value === 'string' - ? value.replace(/,/g, '.') - : value - - return field.onChange( - field.value.map((p) => - p.participant === id - ? { - participant: id, - shares: fixedValue, - } - : p, - ), + pattern="[0-9]+([,\.][0-9]+)?" + onChange={(event) => + enforceCurrencyPattern( + field.onChange, + event.target.value, ) - }} + } inputMode={ form.getValues().splitMode === 'BY_AMOUNT' From 8c9ce75840ab417524bd52cf20eb713b13e05e57 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Tue, 27 Feb 2024 14:13:56 +0200 Subject: [PATCH 5/6] Fix behaviour in paidFor field --- src/components/expense-form.tsx | 42 +++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index eebdbabe..04dd4da7 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -56,17 +56,16 @@ export type Props = { runtimeFeatureFlags: RuntimeFeatureFlags } -const enforceCurrencyPattern = ( - onChange: (value: string) => void, - value: string, -) => - onChange( - value - // replace commas with dots - .replace(/,/g, '.') - // remove all non-numeric and non-dot characters - .replace(/[^\d.]/g, ''), - ) +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, @@ -236,9 +235,8 @@ export function ExpenseForm({ step={0.01} placeholder="0.00" onChange={(event) => - enforceCurrencyPattern( - field.onChange, - event.target.value, + field.onChange( + enforceCurrencyPattern(event.target.value), ) } /> @@ -458,11 +456,19 @@ export function ExpenseForm({ participant === id, )?.shares } - pattern="[0-9]+([,\.][0-9]+)?" onChange={(event) => - enforceCurrencyPattern( - field.onChange, - event.target.value, + field.onChange( + field.value.map((p) => + p.participant === id + ? { + participant: id, + shares: + enforceCurrencyPattern( + event.target.value, + ), + } + : p, + ), ) } inputMode={ From 54501af9b6be85c2f18c074aec8635aa187eca54 Mon Sep 17 00:00:00 2001 From: Sebastien Castiel Date: Wed, 28 Feb 2024 10:56:34 -0500 Subject: [PATCH 6/6] Fix duplicated onChange prop --- src/components/expense-form.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index 6583213a..84fe7c53 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -221,7 +221,7 @@ export function ExpenseForm({ ( + render={({ field: { onChange, ...field } }) => ( Amount
@@ -235,9 +235,7 @@ export function ExpenseForm({ step={0.01} placeholder="0.00" onChange={(event) => - field.onChange( - enforceCurrencyPattern(event.target.value), - ) + onChange(enforceCurrencyPattern(event.target.value)) } onClick={(e) => e.currentTarget.select()} {...field}