Fix decimal separator issue in numeric form fields

[jantuomi]

Related:

• Previous PR: Fix decimal point issue in expense form schema amount field #90
• Issue: Decimal separator for locales where decimal point is a comma #78

Problem

I previously made a fix that converted commas to dots in the "amount" field during Zod validation. Turns out, on some browsers, the problem remained, and these numbers that used a comma as the decimal separator were not accepted as valid numbers.

The reason was that when using inputs with type="number", browsers have different behaviour regarding validation. For example, iOS Safari rejects numbers with commas in them. This happens before the number can reach the Zod validation and be subsequently fixed with the previous fix.

I first attempted to replace commas with dots in an onChange handler, but it turns out that the "erroneous" numeric value is not accessible to JS in that context when browser validation has deemed it invalid (I.e. event.target.value is empty or not in sync with the inputted value). The browser validation needs to be disabled first.

Fix

• Make the inputs type="text" to circumvent the aggressive validation, while retaining the same input experience with inputMode="decimal"
• Replace commas with dots in an onChange handler.

This also fixes the same issue in the paidFor field inputs.

Issues with this fix

• With input="text", desktop browsers will no longer show an "up-down" widget that nudges the value up or down. I don't think this is a big problem since not many use that anyway.

[shynst]

value is always string here!

[shynst]

Since you changed the input type to "text" all types of non numeric characters are allowed here. You should consider filtering them out here!

[jantuomi]

@shynst Thanks for the review! Fixed the found issues in the latest commit.

[shynst]

This breaks, because this field.onChange() has a different signature than the one above.

May I suggest:

onChange={(event) =>
      field.onChange(
        field.value.map((p) =>
          p.participant === id
            ? {
                participant: id,
                shares:
                  enforceCurrencyPattern(
                    event,
                  ),
              }
            : p,
        ),
      )
    }

where enforceCurrencyPattern() becomes

const enforceCurrencyPattern = (event: ChangeEvent<HTMLInputElement>) =>
  event.target.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, '')

Note: this also solves the issue where text could be entered with multiple comas

[jantuomi]

@shynst Thanks. I applied those changes with the small difference of passing only the value string to enforceCurrencyPattern. Also removed a pattern field that I accidentally committed earlier.

[shynst]

Works, great!

[scastiel]

💯