react-numeric-input
react-numeric-input copied to clipboard
Cursor maintenance
Hi, and thanks for your library.
Depending on the formatting function passed in (e.g. insertion of commas as a thousands-separator is a common one), the cursor can sometimes end up in surprising position for the user when typing. There is a decent treatment of the issue here: http://michaellaszlo.com/cursor-maintenance/introduction/ Is there any ability to accommodate for this with the current API?
If not, it would be useful for there to be some sort of 'cursor maintainer' function that when passed the input pre-and-post format, returns a new cursor position.
Hi and thanks for the suggestion. I did some experiments but as you can see it is a whole library just to support commas and my component supports arbitrary formats. I don't think it would be possible but your other proposal sounds good. I am currently experimenting with overloaded format function that receives oldText, newText, selectionStart, selectionEnd etc. and can return simple string as before or an object as { text: "formatted", selectionStart: 1, selectionEnd: 1 }. The problem is that requires some fundamental changes and it is hard to make them in a backwards-compatible way so I need to write a lot of tests too. My goal for now is to include this in the next version.
Hi, Thank you for your module. When are you planning to fixed this issue?
+1 for that feature. See the demo - I type 1 then 2, but the result is £21.

The parse and format functions I use:
const format= num => `£${num}`;
const parse = parse =>parse.replace("£", '');
const onChange=(v, s) => item.setPrice(parseFloat(s.replace('£', ''));
Seems like selectionStart and selectionEnd need +1 to get the correct cursor position.
@agoldis I am having this exact problem with a leading 0. Did you ever find a solution to this. 12 turns to 21. Could really use some help. Thanks so much!
@willbee28 I ended up not using this module :)
@agoldis Darn haha, could you fill me in on what you switched to so maybe I can as well? I want to use standard HTML numeric input but doesn't work in IE which I need to stupidly enough