mui-tel-input icon indicating copy to clipboard operation
mui-tel-input copied to clipboard

fix: avoid cursor to jump to the end after a change

Open mRoca opened this issue 1 year ago • 5 comments

Fixes https://github.com/viclafouch/mui-tel-input/issues/5 Inspired by https://github.com/viclafouch/mui-tel-input/pull/81

mRoca avatar Jan 24 '25 18:01 mRoca

I am currently using [email protected], screenshots here are from mui-tel-input codesandbox, for part 1 testing just add the forceCallingCode prop to <MuiTelInput />

Does this fix following problems:

1. With forceCallingCode Jumping** to the end of string when maximum length of country formatting is reached by either adding numbers to middle of string or deleting too long number?

Here is an example:

  1. Max allowed length in Finnish phone numbers: image
  2. Add number 5 (or paste several numbers) in middle and cursor jumps to the end image
  3. Delete number 5 from middle: image
  4. Cursor again jumps to the end of phone number image

Also, if I switch applications/tab and come back, the cursor jumps to the end of input. This is a much less of a problem

2. Without forceCallingCode if i edit the country calling code in any way, the cursor will jump to the end of the phone number.

Delete the number 8 from country calling code (same thing happens if you add a number there): image and the cursor jumps to the end of the phone number. image

Awesome if these are fixed too. And if it doesn't fix them, it's probably not worth it to try to include them in this PR.

jukkahuuskonen avatar Mar 06 '25 11:03 jukkahuuskonen

Hi @jukkahuuskonen, I don't get you point: are you asking without testing, or have you already tried your use case with the fix ?

If you have not already tried, you can do it by using the PR's branch even on your computer. Please tell me if anything related to avoid cursor to jump to the end after a change is not well handed 👍🏻

mRoca avatar Mar 06 '25 13:03 mRoca

I'm simply asking if these cases have been noticed and taken into account. The version I used before handled all editing very badly and v.6 seems to have the problems above. the case 2 above, prevents me from using this input everywhere and I have to use my homemade simple PhoneNumber-component (it has no formatting or flags at all).

I have to see If I have time to try the PR, but I'm not too hopeful about it...

jukkahuuskonen avatar Mar 06 '25 14:03 jukkahuuskonen

Is there an update on this fix?

evgueni-makarski avatar Sep 10 '25 20:09 evgueni-makarski

Can this please get a review and release @viclafouch ? Thanks for the package

TSMMark avatar Nov 04 '25 21:11 TSMMark