While using usePhoneInput hook, modifying the phone number breaks caret position handling

[kmukku]

I’m using the react-international-phone library in my project to create a custom phone input component. The usePhoneInput hook works well for managing country codes and formatting phone numbers. However, I’m encountering an issue with caret (cursor) positioning when users modify the phone number, especially when typing or deleting characters in the middle of the input.

The issue occurs when:

• A user types or presses backspace in the middle of the phone number, causing the caret to unexpectedly jump or reset to the end after the input is formatted. My handling includes modifying the phone number to remove leading zeros.

I understand the library formats the input according to the selected country's mask, but I need the caret position to stay in place relative to where the user is typing, even after the formatting occurs.

What I’ve tried:

• Capturing the cursor position before updating the phone number state and trying to restore it after formatting, but this solution doesn’t work consistently.

Question:

• How can I ensure the caret position remains correct when using usePhoneInput hook and modifying the phone number, especially when users type or delete characters in the middle of the input?
• Am I missing a step using handlePhoneChange, or is there another approach I should take with usePhoneInput?

Any suggestions on how to fix this would be greatly appreciated!