p-inputmask: when adding required property cursor doesn't go at the begining of mask

[mgrzego3]

Describe the bug

If required property is added to p-inputmask behaviour of cursor changes. Instead of going at the beginning of the mask it goes closest to place where click occurs.

Click in the middle of p-inputmask with required property: Click in the middle of p-inputmask without required property:

Environment

ng serve

Reproducer

https://primeng-inputmask-demo-2qppbg.stackblitz.io

Angular version

15.1.3

PrimeNG version

15.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.14.0

Browser(s)

firefox, chrome

Steps to reproduce the behavior

1. Click in the middle or near to right side of p-inputmask with required property
2. Cursor is in the middle or at the end of mask

Expected behavior

Cursor should be at the beginning of mask

[nicolasnevraumont]

I noticed a similar behaviour but linked to the autocomplete property.

Setting autocomplete="off" prevents from having the cursor moving into or at the end of the mask.

[markleppke]

It also prevents the user from inputing a value, which is an usability issue. A user enters the field with the cursor at the end with remaining room in the mask to enter content and tries to input a value, expecting something to show up in the field, but there is no response.

A user's likely expectation is:

• if they click on a blank field that their cursor is set to the start of the entry
• if they click on existing content the cursor is place at that location, provided that there is content that they are trying to edit in that location E.g. if the field has content like 122-363-3434 and they click after the 6 they would expect the cursor to show up there
• if they click on existing content that is partially filled, e.g. the mask is --**** and the current value is 112, and they click at the end of the field their expectation is that the cursor would be placed after 112