-
-
Notifications
You must be signed in to change notification settings - Fork 480
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Parse moves cursor to end of input field #317
Comments
Related to #255? |
It also happens with the phone field in the same example. |
I think its the typical react input cursor jump issue: facebook/react#955 |
any workaround on this issue? |
Not using Example: |
@emartini could you solve it without |
New to the code base but working on a solution, attempting to add a 3rd parameter to parse callback sending old value, if new value is shorter than the old value don't parse. // todo: add oldValue to callback
const normalizePhone = (value, field, oldValue) => {
if (!value) return value;
const isDelete = oldValue.length > value.length
if(isDelete) return value;
const onlyNums = value.replace(/[^\d]/g, "");
if (onlyNums.length <= 3) return onlyNums;
if (onlyNums.length <= 7)
return `(${onlyNums.slice(0, 3)}) ${onlyNums.slice(3, 7)}`;
return `(${onlyNums.slice(0, 3)}) ${onlyNums.slice(3, 6)}-${onlyNums.slice(
6,
10
)}`;
`};` |
@taschetto I am starting to believe that what solved this for Esteban was not necessarily the use of @erikras - Does this seem like a plausible theory/something worth investigating further? UPDATE: The only time that I can get the cursor to not jump is when the input length is less than the allowed length (in this example, less than 10 digits entered) AND when the cursor is in the last "chunk" of the value (in this example, when the cursor is to the right of the last hyphen if any have already been added). After some more playing, this seems to be tied to whenever the value is mutated from the previous (e.g., for the phone number, I input a character to turn "123" into "1234" - and then my masking mutates it to "123-4") - meaning that
I am hypothesizing that the state update/rerender happening within RFF is happening after the |
See this example, in the username field:
https://codesandbox.io/s/10rzowm323
Typing an uppercase character moves the cursor to the end of the line. This is only visible when the cursor has characters to it's right.
The text was updated successfully, but these errors were encountered: