InputNumber - unable to enter negative with minFractionDigits set

[danielbecroft]

I'm submitting a ... (check one with "x")

[ x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports) https://stackblitz.com/github/primefaces/primeng-issue-template?file=src%2Fapp%2Fapp.component.html

Current behavior

When minFractionDigits is > 0, entering a - jumps the cursor to the end of the display.

For example:

• Clear out the value in the field.
• Enter -1, the value jumps to -1.00, and the cursor is at the end of the field
• Clear the field
• Enter 1.22 - the value is allowed to be entered correctly.

Expected behavior

The cursor should not move after filling in the number of the - sign.

Minimal reproduction of the problem with instructions

<p-inputNumber [(ngModel)]="value3" inputId="minmaxfraction" [minFractionDigits]="2" [maxFractionDigits]="2">
</p-inputNumber>

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 10.x

• PrimeNG version: 10.0.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[TangibleSystems]

I've just spent a month refactoring a project to Anguar 10 and PrimeNG 10.03 for a scientific app, only to be badly bitten by the same bug

[Riaan-Crause-Kohde]

This is being caused by the updateInput method

updateInput(value, insertedValueStr, operation) {
    insertedValueStr = insertedValueStr || '';

    let inputValue = this.input.nativeElement.value;
    let newValue = this.formatValue(value);
    let currentLength = inputValue.length;

    // Due to the minus character creating a length of 1
    // this condition is never entered as it normally would with a positive character
    if (currentLength === 0) {
        this.input.nativeElement.value = newValue;
        this.input.nativeElement.setSelectionRange(0, 0);
        this.initCursor();
        const prefixLength = (this.prefixChar || '').length;
        const selectionEnd = prefixLength + insertedValueStr.length;
        this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);

I've tested a small workaround that got me the behaviour I desired, but I'm not sure if this is the appropriate approach:

updateInput(value, insertedValueStr, operation) {
    insertedValueStr = insertedValueStr || '';

    let inputValue = this.input.nativeElement.value;
    let newValue = this.formatValue(value);
    let currentLength = inputValue.length;
    let isMinusSignStart = inputValue === '-';

    // Check and handle input starting as minus sign
    if (currentLength === 0 || isMinusSignStart) {
        this.input.nativeElement.value = newValue;
        this.input.nativeElement.setSelectionRange(0, 0);
        this.initCursor();
        const prefixLength = (this.prefixChar || '').length;
        const minusSignLength = isMinusSignStart ? 1 : 0;
        const selectionEnd = prefixLength + insertedValueStr.length + minusSignLength;
        this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);

[TangibleSystems]

Thanks Riaan. Your fix worked well.