Ion-input[type="number"] max and min doesnt work - with vue

Ionic Framework Ionic Vue
1

I can input more than the max set in the ion-input or less, and i cannot call the " HTMLInputElement.stepDown() - HTMLInputElement.stepUp() " using a ref from a button, code:

Code link: https://pastebin.com/raw/9XZaFsyV

Another issue is that the ion-input freezes after entering a number, if i try to focus on it again doesnt work.

Ionic version:
4.x
5.x

Ionic info:
“@ionic/vue”: “^5.6.0-dev.202102221703.5300dcc”,
“vue”: “^3.0.0-0”,

2

I received a GitHub issue about this a few days ago, so I will post what I said on that thread here as well:

The max and min properties are passed to the underlying native input and as such as subject to the behavior that has been implemented by browser vendors.

If the value exceeds the max or is less than the min, then the input fails constraint validation. In other words, users can still enter any number they want, but if the number is out of the accepted range then the form will not submit.

You can see the same behavior using a native input outside of Ionic Framework: https://codepen.io/liamdebeasi/pen/rNjQEYK

To limit the values that users can enter you can either add some JavaScript to do this or write a regex for the pattern property. Please note that if you use pattern then you will need to change the input type to text: HTML attribute: pattern - HTML: HyperText Markup Language | MDN

1 Like
3

Also regarding calling the methods, you are going to need to get a reference to the native input element. You can use the getInputElement method on ion-input to get a reference to the native input so you can call stepDown on it: ion-input: Ionic Framework API Docs

1 Like