Cursor jumping issue if the ref passed isn't a ref object

[osdiab]

trafficstars

Describe the bug If the ref you pass to a currency amount input isn't a mutable ref object but instead is a function, then the logic to prevent cursor jumping doesn't get triggered, and therefore the cursor jumps. This is particularly annoying since I want to pass several refs merged together into a single ref function into the currency input, but that causes it to jump around.

https://github.com/cchanxzy/react-currency-input-field/blob/d7c63d5f5398f30d37f3480129c8775a28d03f2e/src/components/CurrencyInput.tsx#L303-L314

To Reproduce Steps to reproduce the behavior:

1. Pass a ref function to the currency amount input
2. try typing near a thousands separator comma
3. see that it jumps the cursor to the end

Expected behavior both object and function refs work

Code Sandbox https://codesandbox.io/s/dazzling-elion-jgo678?file=/src/App.js

Additional context can work around by calling the ref function in a useEffect().

https://www.loom.com/share/7d3feb2064054fa39608c21ec201b834

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[osdiab]

still an issue

Omar

On Fri, Sep 09, 2022 at 2:37 AM, stale[bot] @.***> wrote:

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

— Reply to this email directly, view it on GitHub https://github.com/cchanxzy/react-currency-input-field/issues/247#issuecomment-1241028029, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONU3TKUUUL5W7O2NLZGETV5IP4ZANCNFSM5ZS6V2XA . You are receiving this because you authored the thread.Message ID: @.***>

[s10mcow]

+1 same issue when using with react-hook-form

[FloorianB]

+1 same issue here using react hook form. Ref create cursor jump and bad behavior.

I managed to bypass unexpected behavior thanks to @osdiab trick :

useEffect(() => { setCleanRef(ref) }, [ref])

[s10mcow]

@FloorianB whats the setCleanRef trick? Am i missing it in the above code?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

:tada: This issue has been resolved in version 3.6.10 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: