Backspace is troublesome with suffixes

[igorsantos07]

1. add a field with a suffix
2. focus it and type away. All good.
3. go to the next field or whatnot
4. get back to it, click the end of the input, and try to backspace it
5. :boom: you can't backspace because the suffix is unremovable. It should, actually, backspace the last digit on the mask.

[jsillitoe]

Good catch, I'll look into a fix over the weekend.

[igorsantos07]

That was my client's catch, not mine! I'm so used to masks being troublesome that this issue just slipped over my reviews hahah Thanks for the quick response, sir :)

[jsillitoe]

I've spent a little time on this, and would like your opinion on something. Not only is the bug you describe happening, there is a related scenario where if you change a digit somewhere else in the field, the cursor jumps to the end.

To solve these issues, I'm thinking of adding code that would force the cursor to always remain after the last digit and before any suffix. Alternatively, it could move the cursor to after that last digit if it finds the cursor is located in the suffix but otherwise store and then restore the cursor location after render. Might also have to take selections into account for both scenarios. Thoughts?

[igorsantos07]

• on the cursor position: what makes the most sense to me is to avoid the cursor to be placed after the suffix, as if the suffix didn't make part of the input. Forcing it to stay in a fixed place doesn't feel right, as you'll be reducing the user's possibilities. And I'm not sure it's needed to store the cursor position? Might just be my outside view, tho.
• Selections: doesn't seem like an issue right now; my workaround when I wanted to erase the entire box with the suffix blocking me was, exactly, Ctrl+A + Delete, instead of repeatedly hitting backspace.

[jsillitoe]

I think I've made progress on this, but I'm not sure it's perfect. Any chance you can download and check out the examples. Let me know if this will work for you and your client. If so, I'll publish the release to npmjs.

[prule]

Hi, I'm interested in a fix for this bug too. I tried the example, and noticed a few strange things:

• If you focus 'example 1' and type in 4 numbers, eg '11.11' it then selects the first 4 characters eg '11.1' instead of the full number '11.11' - if you then move out of the text input and come back, it seems to work correctly (reload the page and it'll fail again)

• In these examples the inputs are restricted in length but I didn't see any configuration for that - eg example 1 only allows <2>.<2> - what is limiting it to smaller than 100?

Thanks.

[igorsantos07]

I can see you made some work on this, but it still doesn't quite solve the issues on dealing with a suffix. See if the following gif helps understanding its behavior: backspace after the suffix does nothing, and now it jumps to the end of text whenever I change the actual numbers. It's very easy to stay after the suffix as it's the "clear area" on the field and "safer" to click with the mouse.

[giovanniKleinCampigoto]

I'm interested in this issue too, having the same problem here :/