Invalid cursor position

[mashafomasha]

We want to allow user to type any digit, dot or comma symbols and replace comma with dot on the fly.

const numberAccept = /[\d.,]+/g;

const parseNumber = string =>
  (string.replace(",", ".").match(numberAccept) || []).join("");

But when user types comma symbol cursor visually jumps to the wrong position before new dot symbol.

Sandbox example:
https://codesandbox.io/s/istarkovrifm-numberformat-e6jfu?fontsize=14

[TrySound]

Hi, currently we handle similar case with toLowerCase. Though it's hardcoded now.
https://github.com/istarkov/rifm/blob/master/src/Rifm.js#L81-L96

We will probably add isEqual prop so you could provide own check considering , and ..

[TrySound]

We found interesting solution. It will be another transformation prop with saving cursor position.

[TrySound]

this works with new replace api in 0.9

[pastushenkoy]

I could achive the described behavior only by:

1. creating format function, which keeps original delimiter
2. creating replace function, which replaces original delimiter with the desired one.

If this is the only way I can do it, then it's quite sad because:

1. For parsing floats, I need to replace commas with dots in format function
2. Then I need to determine the initial delimiter and reconstruct formatted value with initial delimiter
3. Here I can apply replace and get what I want

A better solution would be introducing a preprocessor function. A good candidate for it is the accept prop. If it is a function then, instead of applying it as a regex, it should be called on an input value and change the input before applying format.

What do you think about it?

[istarkov]

looks like good idea 👍