Editing input field causes cursor to jump to end of string

[dsound-zz]

When I try to edit within the date field, the cursor moves to the end of the string and instead of being able to backspace and insert a new value.

Steps to reproduce:

import { formatWithMask } from 'react-native-mask-input'


const Test = () => {
  const [date, setDate] = useState('')

  const { masked } = formatWithMask({
    text: date,
    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
  })

 return (
   <>
     <input placeholder="mm/dd/yyyy" value={masked} onChange={(val) => setDate(val)} name="date" />
   </>
  )

}

export default Test

Expected behavior: Be able to click within date, backspace to remove value and add new value

Actual behavior: The second slash is removed and the cursor is moved to the back of the input

[oliviercperrier]

👆 ++

[Buzzzatti]

++

[oliviercperrier]

up

[bombillazo]

This issue is causing us to reconsider using the library, unfortunately. It degrades the UX and confuses users.

[CaioQuirinoMedeiros]

There's no reproducible code

[CaioQuirinoMedeiros]

are you guys just using the formatWithMask function on a web project with a input html tag? so the cursor position is not function's fault.

You can try use the hook useMaskedInputProps, see the example usage on README and adapt to use within the input html

[oliviercperrier]

Personally im using the MaskedInput from the library and its doing the same problem as mention in this issue.

I'm currently looking at an alternative library because i get bad feedback from users of my app juste because of this.

[oliviercperrier]

@CaioQuirinoMedeiros Here is a repro link: https://codesandbox.io/s/immutable-morning-9ioot7?file=/src/App.js

Editing the year is ok, but when you try to edit the day or the month, you'll see the problem, everything get shifted to the left.

Would be great if it could work like this react library (which is not compatible with react-native unfortunately): http://sanniassin.github.io/react-input-mask/demo.html

[oliviercperrier]

@CaioQuirinoMedeiros Any updates? Thanks

[CaioQuirinoMedeiros]

No. Sorry guys, I'm not having time for this

[arhipy97]

HI @oliviercperrier, have you picked an alternative library? The same problem. 😢

[oliviercperrier]

HI @oliviercperrier, have you picked an alternative library?

The same problem. 😢

@arhipy97 Ive built my own 😂

[midhun-sa]

@oliviercperrier Can you share how you done this please??

[zameschua]

In case it helps any of you, the root cause of the app is described here (not written by me, but the blog post links to this specific specific issue) https://giacomocerquone.com/keep-input-cursor-still/