Cursor jumping issue if the ref passed isn't a ref object
See original GitHub issueDescribe 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.
To Reproduce Steps to reproduce the behavior:
- Pass a ref function to the currency amount input
- try typing near a thousands separator comma
- 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()
.
Issue Analytics
- State:
- Created a year ago
- Reactions:3
- Comments:6 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
+1 same issue when using with react-hook-form
still an issue
Omar
On Fri, Sep 09, 2022 at 2:37 AM, stale[bot] @.***> wrote: