Calendar mask with timeOnly cursor issue

[augustosnk12]

Describe the bug

When I use the maks props in Calendar component and type the value, the position of the input cursor just appear after the second typed value so the first one goes to the end. It happens when the input is already filled with a value and I try to edit it inserting a new one.

Example: current value of input is 12:00 and I want to replace to 13:30. The final result is 33:01 because of the cursor position.

Reproducer

https://codesandbox.io/s/primereact-calendar-mask-cursor-error-yv3n72?file=/src/App.js

PrimeReact version

9.6.2

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

The steps are quoted in the codesandbox fork

Expected behavior

No response

[melloware]

@akshayaqburst let me know what you find out. The Calendar with mask has been tricky.

[augustosnk12]

any update on this?

[melloware]

@augustosnk12 can you confirm this is still an issue with 10.0.9?

[TimmTha7er]

I try to fix it using onChange and onBlur events(commented). It works but it seems like a crutch

Example: CodeSandbox

[augustosnk12]

Thanks for the reply @TimmTha7er , but there is still some issues in your solution. Example: trying to type "13:30" it returns me "13:03"

[TimmTha7er]

Thanks for the reply @TimmTha7er , but there is still some issues in your solution. Example: trying to type "13:30" it returns me "13:03"

to correct work you need to uncommented onBlur and onChange events

[augustosnk12]

In version 10.2.1 there is another issue: it is needed to double click input to be able to type

[CroAnna]

Thanks for the reply @TimmTha7er , but there is still some issues in your solution. Example: trying to type "13:30" it returns me "13:03"

How to fix this problem? Is there a solution, a working sandbox, not only a workaround?

[TimmTha7er]

Thanks for the reply @TimmTha7er , but there is still some issues in your solution. Example: trying to type "13:30" it returns me "13:03"

How to fix this problem? Is there a solution, a working sandbox, not only a workaround?

The commented code solves the problem. To correct work you need to uncommented onBlur and onChange events