Cursor moves to first position after paste handler in NumericFormat component

[mkrishnan-codes]

I have a NumericFormat component where I need a custom paste handler to manipulate the pasted value (e.g., allowing only the first 3 digits and stripping off the rest). However, when I set the value using a prop update after handling the paste event, the cursor moves to the beginning of the input instead of staying at the last position.

This issue occurs regardless of whether I manipulate the pasted value or not—simply updating the value via props causes the cursor to reset to the first position.

Steps to Reproduce

1. Implement a NumericFormat component that accepts a controlled value prop.
2. Add a custom onPaste handler to manipulate the pasted content.
3. Update the value state using props after pasting.
4. Observe that the cursor moves to the beginning of the input instead of remaining at the last position.

Expected Behavior

After pasting and updating the value via props, the cursor should remain at the last position rather than resetting to the beginning.

Actual Behavior

The cursor moves to the first position after pasting, even when the pasted value remains unchanged.

Environment

• Framework/Library: React
• Version: 132.0.6834.160
• Browser: Chrome
• OS: macOS

Possible Cause

The controlled nature of the input might be causing React to reset the cursor position when updating the value.

Potential Workarounds

• Manually restore the cursor position after setting the value.
• Use setSelectionRange or input.selectionStart to retain the cursor position.

Helps appreciated.

Reproducible sample:-
https://codesandbox.io/p/sandbox/react-number-format-paste-test-mvfy48