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.

https://github.com/eduardoborges/use-mask-input/blob/d9217a9743c31110c79915e5a176987e9d39428d/src/utils/getMaskOptions.ts#L28

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"
/>