InputNumber: Selection lost when not selecting all content from left to right when prefix is enabled on the left.

[jpmBBconsult]

Describe the bug

Hi

When using a prefixed number input with the prefix on the left, if not all the content is selected, and the selection includes the prefix, the selection is lost.

We think this may be a bug. We observed that bug from ngprime version 15 to 17. But may be present as far as version 10.

Here is some evidence to more clarity on the issue:

https://flashbackconnect.com/Default.aspx?id=S3gmOS4xCav-orBnZggxPg2

Here is the quick solution that we found.

Replacing this

primeng/src/app/components/inputnumber/inputnumber.ts

Line 1166 in 2655361

selectionStart = selectionStart - prefixLength;

with:

        // allow set any value if is not in selection mode (so when selectionStart is negative,
        // the guards after next block fix the cursor)
        // if is selection mode but is just a part of the prefix
        // (when writing inside the prefix, the input gets cleared so don't allow it)
        // will allow negative values to be set so cursor will be fixed also
        if (selectionStart === selectionEnd || selectionEnd < prefixLength)
        {
            selectionStart -= prefixLength;
        }

Optional:

We also detected some unexpected, weird behaviors when selecting for example the fractional separator and then writing a number over it.

https://flashbackconnect.com/Default.aspx?id=IpG7FGymJErI6WP_g4i9sw2

To avoid that we added some sort of guard like this that clears the selection putting the cursor on the left side of the fractional separator.

// If the user has selected only the decimal separator, adjust the selection to avoid it
if (inputValue.substring(selectionStart, this.input.nativeElement.selectionEnd) === decimalSeparator) {
    // Set the cursor position to the start of the selection, effectively deselecting the decimal separator
    this.input.nativeElement.setSelectionRange(selectionStart, selectionStart);
    return 0;
}

Please let me know if this this solution fits and a PR is welcomed or if it can be improved.

Best Regards

Environment

Node 16, Angular 15, Edge 123, Windows 11

Reproducer

No response

Angular version

15

PrimeNG version

15.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16

Browser(s)

Edge 123

Steps to reproduce the behavior

1. Go to https://primeng.org/inputnumber
2. Find Left Prefixed input
3. Make an incomplete selection from left to right.
4. The selection is lost.

Expected behavior

1. Go to https://primeng.org/inputnumber
2. Find Left Prefixed input
3. Make an incomplete selection from left to right.
4. The selection is maintained.

[cetincakiroglu]

Hi @jpmBBconsult,

Could you please create the PR so we can review? Moving the issue to the next week's milestone until the PR arrives.