renato-bohler/redux-form-input-masks

Cursor position does not save

ahtohbi4 opened this issue · 6 comments

ahtohbi4 commented

What are you reporting?

  • Bug
  • Feature request
  • Code refactor
  • Continuous Integration (CI) improvement
  • Changes in documentation (docs)
  • Other (describe)

What is the current behavior?

When you type some value in a field with createNumberMask or createTextMask, place the text cursor in the middle of the value and try to add some, the cursor will move to the end of the value.

What is the expected behavior?

The cursor should stay on position after the typed symbol.

Sandbox Link

You can reproduce this behavior on your Sandbox.

What's your environment?

Version: 1.1.4

teves-castro commented

@renato-bohler, looking at the code for manageCaretPosition I wonder why on the 'change' case , instead of moving the cursor to the first unfilled position it is not moved instead to the first valid position?

sachinsinghi commented

Facing similar issue, when value is entered and try to edit it, cursor moves to the end of field.

beastfromthefareast commented

I had this issue and the solution is to manually manage your caret position
Put this in your onChange function

const caret = event.target.selectionStart; const element = event.target; window.requestAnimationFrame(() => { element.selectionStart = caret; element.selectionEnd = caret; });

  • 👍2
ziaulrehman40 commented

Why is this not yet fixed, it destroy UX

ziaulrehman40 commented

@renato-bohler Is this fixed?

renato-bohler commented

No, I just closed it since apparently there's a workaround for that. I'm accepting PRs, but I'm not putting too much time into maintaining this repository.