react-numeric-input icon indicating copy to clipboard operation
react-numeric-input copied to clipboard

Cursor maintenance

Open matt-oxley opened this issue 8 years ago • 6 comments

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.

matt-oxley avatar Aug 03 '17 10:08 matt-oxley

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.

vlad-ignatov avatar Aug 06 '17 23:08 vlad-ignatov

Hi, Thank you for your module. When are you planning to fixed this issue?

RuslanBurgun avatar Jun 06 '18 04:06 RuslanBurgun

+1 for that feature. See the demo - I type 1 then 2, but the result is £21. numeric

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 avatar Aug 24 '18 19:08 agoldis

@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 avatar Dec 28 '18 18:12 willbee28

@willbee28 I ended up not using this module :)

agoldis avatar Jan 02 '19 18:01 agoldis

@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

willbee28 avatar Jan 02 '19 21:01 willbee28