question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:3
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
s10mcowcommented, Oct 4, 2022

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

1reaction
osdiabcommented, Sep 9, 2022

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: @.***>

Read more comments on GitHub >

github_iconTop Results From Across the Web

React controlled input cursor jumps - Stack Overflow
If your value is controlled by state, React will maintain the input's cursor position. The problem is when the input receives a change...
Read more >
REF CURSOR question — oracle-tech
Hi, I have a requirement for a 3rd party consuming app which needs an output parameter of the following format: 'IS REF CURSOR...
Read more >
What is hidden behind React's refs ? | No Code, No Bug
When the user enters the 4 first digits of the credit card, you want the cursor to jump to the 5th position and...
Read more >
A Thoughtful Way To Use React's useRef() Hook
Storing values in refs solve the problem of frequent re-rendering but brought a new challenge of the component not being updated after a...
Read more >
Collection API | Workday Canvas Design System
If not provided, the cursor will point to the first item in the list ... If the component represents an element, this ref...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found