Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InputMask: Unexpected behavior when using "unmask" property #7755

Closed
kpe09 opened this issue Mar 4, 2025 · 7 comments · Fixed by #7686
Closed

InputMask: Unexpected behavior when using "unmask" property #7755

kpe09 opened this issue Mar 4, 2025 · 7 comments · Fixed by #7686
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@kpe09
Copy link

kpe09 commented Mar 4, 2025

Describe the bug

When using a mask that has spaces between the characters, e.g., "**** **** ****", and the "unmask" property is enabled, when you start entering characters their sequence becomes messed up at some point.

Reproducer

https://stackblitz.com/edit/bdj2wmcv?file=src%2FApp.jsx

System Information

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    primereact: latest => 10.9.2 
    react: 18.3.1 => 18.3.1

Steps to reproduce the behavior

  1. Enable "unmask" in InputMask component with mask "**** **** ****"
  2. Enter sequence of characters: ABCDEFGHIJKL in InputMask
  3. When entering F the sequence of the characters becomes misaligned (ABCDFE)

Expected behavior

When entering a certain sequence of characters, the sequence should not be randomly misaligned.

@kpe09 kpe09 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 4, 2025
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Mar 4, 2025
@sarathkumarsasi
Copy link

Hi @melloware, Can I work on this?

@melloware
Copy link
Member

Sure

@sarathkumarsasi
Copy link

Hi @melloware , I have pushed the fix. Please verify and merge.

@melloware
Copy link
Member

I think this is already fixed by: #7686 as in main I running npm run dev i cannot reproduce your issue.

@sarathkumarsasi
Copy link

I think this is already fixed by: #7686 as in main I running npm run dev i cannot reproduce your issue.

https://stackblitz.com/edit/bdj2wmcv?file=src%2FApp.jsx
I am still getting the input jumbled up when the character reaches the space part in the given mask, so I guess the issue persists.
@melloware Please double-check it once more.

@melloware
Copy link
Member

melloware commented Mar 9, 2025

@sarathkumarsasi stackblitz is running PrimeReact 10.9.2 as 10.9.3 is not released yet. The fix is in current gitHub Main branch but not been released yet.

You can test it by running npm run dev and just editing the InputMask basicdoc.js page to match the StackBlitz. When I do that I can't reproduce the issue its working fine.

@sarathkumarsasi
Copy link

@melloware Go it, Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
3 participants