primefaces / primefaces/primereact

Calendar mask with timeOnly cursor issue

Open
#4,928 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Resolution: Workaround Type: Bug
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Calendar component and the linked CodeSandbox reproducer using PrimeReact 9.6.2. Reproduce editing the existing timeOnly value 12:00 toward 13:30, then verify that the cursor stays in the intended position and the final value is correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.