Primeng: Max value on Spinner not working as expected

Created on 10 May 2017  路  5Comments  路  Source: primefaces/primeng

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

Current behavior
Max is set to 100. Text is properly being displayed as 100 if you type a value larger than 100, but only on the first digit past 100. If you continue to type a number after it is set to 100 the number will be kept in the input. For instance type 9999. The value will be 1009.

Expected behavior
You cannot enter a value above what is defined as Max

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/79FW5KTVmIGarLINrR4d?p=preview
Type 9999. The value displayed will be 1009.

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

Please tell us about your environment:

  • Angular version: 2.0.X
    4.0.1

  • PrimeNG version: 2.0.X
    4.0.0-rc.*

  • Browser:
    All

  • Language:
    All

defect pending-review

Most helpful comment

Also, there's a strange behaviour related to input speed: (I'm considering the setup of the very same plunkr from the issue description)

Typing '1001' really fast will lead to the [max] constraint working properly, and the input value to be set to '100'. However, type it slowly won't produce any correction.

In the other hand, just type '1000' (with this [max]="100" constraint ) won't produce any correction by the component, regardless of the typing speed.

All 5 comments

Also, there's a strange behaviour related to input speed: (I'm considering the setup of the very same plunkr from the issue description)

Typing '1001' really fast will lead to the [max] constraint working properly, and the input value to be set to '100'. However, type it slowly won't produce any correction.

In the other hand, just type '1000' (with this [max]="100" constraint ) won't produce any correction by the component, regardless of the typing speed.

I've been working on pinpointing this issue for a week now and haven't found where the bug is exactly, but I can confirm that the underlying value will be set to the max if you type an number that exceeds max. The display of the control is just incorrect. The correct max value is returned form the parseValue method.

parseValue(val: string): number {
        let value: number;

        if(this.formatInput) {
            val = val.split(this.thousandSeparator).join('');
        }

        if(val.trim() === '') {
            value= this.min !== undefined ? this.min : null;
        }
        else {        
            if(this.precision) {
                value = parseFloat(val.replace(',','.'));
            }
            else {
                value = parseInt(val);
            }

            if(!isNaN(value)) {
                if(this.max !== undefined && value > this.max) {
                    value = this.max;
                }

                if(this.min !== undefined && value < this.min) {
                    value = this.min;
                }
            }
            else {
                value = null;
            }
        }

        return value;
    }

@Sergeon To add to your comment. This is a problem with typing in the same value as MAX. Change MAX to 999 and type 9999. The correction will not be displayed, however as mentioned in the last comment the actual underlying value will be correct as the IF condition was met.

We'll check this for 4.1.1. cc @Mrtcndkn

NgModel was not updated to be the 999999 due to validation but the input was stuck at it, we call this.valueAsString = ''; which is bound to the value of the input, somehow this was working in old Angular versions. We force update now using ViewChild to fix the issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

cyberrranger picture cyberrranger  路  3Comments

lilling picture lilling  路  3Comments

papiroca-tm picture papiroca-tm  路  3Comments

jisqaqov picture jisqaqov  路  3Comments

watalberto picture watalberto  路  3Comments