search

s-yadav / react-number-format

React component to format numbers in an input or as a text.
MIT License
3.9k stars 410 forks source link

Bug with cursor position during copy+paste into input with dynamic (changing) mask (format) #772

Closed akhmadullin closed 1 year ago

akhmadullin commented 1 year ago

Describe the issue and the actual behavior

c0157ea broke cursor position during copy+paste into input with dynamic mask

I have phone input. When input is focused and empty - short mask (+7 () is shown

short mask

when input is not empty - full-format mask (+7 (###) ###-####) is shown

long mask

c0157ea affects copy+paste process

Previously, before c0157ea, after applying copy+paste cursor was after last inserted symbol in input

https://github.com/s-yadav/react-number-format/assets/37641303/4ed45467-cdeb-4444-8229-1bf77a78be01

Now (commit c0157ea) after applying copy+paste cursor is stayed on the same place, where is was before pasting

https://github.com/s-yadav/react-number-format/assets/37641303/22cf7a36-1171-43ca-a0e0-503b439d8a56

Describe the expected behavior

Expected behavior - after pasting cursor is moved to the end of the inserted text, as it was before c0157ea

https://github.com/s-yadav/react-number-format/assets/37641303/4ed45467-cdeb-4444-8229-1bf77a78be01

Provide a CodeSandbox link illustrating the issue

Demo for v5.1.4 - after copy+paste cursor is moving to the end of text

Demo for v5.2.2 - after copy+paste cursor is staying at the same position, where it was before pasting

Provide steps to reproduce this issue

  1. Open demo
  2. Copy phone number and paste it into the input

Please check the browsers where the issue is seen

Solution

Is it possible to fix this issue?

s-yadav commented 1 year ago

@akhmadullin looks like you have event.preventDefault() added on paste event which hampers with selection. Earlier there used to be double rendering issue, due to side-effect of which even.preventDefault was not impacting the caret position. But that being fixed now event.preventDefault coming into picture.

Just remove that and it should work. Here's an updated sandbox. https://codesandbox.io/p/github/akhmadullin/rnf-v5.2.2-dynamic-mask-copy-paste-broken-demo/csb-dfjqf5/draft/strange-rgb?file=/src/phone-input.tsx:39,17

akhmadullin commented 1 year ago

@s-yadav, yes, it works

thanks for help