Datetime jumping caret lag

[Defite]

Link to reproduce issue: codesandbox

Steps to reproduce:

1. Type correct date
2. Clear field - "Field is required" is showing
3. Try to type new date

Showcase:

[levipadre]

Hi @Defite. I have the same issue. Have you found any solution to this by any chance?

[Defite]

Hi @Defite. I have the same issue. Have you found any solution to this by any chance?

Hi. No, I moved on with another library(

[Defite]

@Defite which library? I'm having the same issue.

I use react-imask.

[thgcst]

@Defite In my case, I was trying to use the currency mask, and had the same caret jumping issue.

I dug into the code and found the problem.

use-mask-input/src/utils/getMaskOptions.ts

Line 28 in d9217a9

placeholder: '',

Looks like every time you pass an empty array as the placeholder on inputmask it behaves weirdly. Their doc suggests to use " ". In my case by just passing placeholder: "0" the issue was fixed.

@eduardoborges great lib btw. Brasil representando 🚀

[Defite]

@thgcst in my case it didn't helped :( I use it like this:

<input
  {...registerWithMask("date", "datetime", {
    inputFormat: "yyyy-mm-dd",
    placeholder: "0",
    required: "Field is required",
  })}
  type="text"
/>

[leandrorazevedo]

Same problem when use controlled Input :

                <Input
                    type='text'
                    id='date'
                    value={value}
                    ref={withMask('datetime', {
                        placeholder: '_',
                        inputFormat: 'dd/mm/yyyy',
                    })}
                    className='bg-background pr-10'
                    onChange={e => {
                        setValue(e.target.value);
                    }}
                />

If remove onChange and value, everything works as expected