Vuetify: Min / Max / Step Support for Number Input Types

[StratusBase]

Steps to reproduce

Versions

master

What is expected ?

When specifying the available "min", or "max" values, the numeric input types abide by them.

Also, support for the native "step" property would be awesome.

What is actually happening ?

Nothing, when specified the numeric input does not receive the value and it allows the input to go beyond the specified min / max values and it completely ignores "step".

Fiddle:
https://jsfiddle.net/b00jL1mt/1/

[johnleider]

Please follow the guidelines on how to report an issue. In particular, provide an example on www.jsfiddle.net (or a similar service) that reproduces the problem. If necessary, create a repository for us to clone with a minimal reproduction. repositories of actual projects will generally not be accepted .

Thank you.

[StratusBase]

@johnleider - Added a Fiddle to the issue

[johnleider]

A few things from review.

• maxlength does not work on number inputs as far as I'm aware
• min/max are primarily used for the counter and are not actually applied to the element

If min/max are explicitly applied, counter would be useless as you would never be able to go outside of them and would only serve as a display. I'm contemplating on how I'd like to address this.

[StratusBase]

Sorry for the confusion, the maxlength property can be ignored as it does not belong on a number input, I think that was a copy/paste error on my part.

What about a new "v-number-field" component?

Then down the road, inputs like, tel, email, date, etc can just be their own self-contained components with their own properties, etc...

The documentation could be more generic for "form controls", and in the API section you could drop-down the various input types to see their properties... Just spit-balling...

[creativecoder]

+1 for this enhancement. Right now when you set type="number", some browsers (like Chrome) enforce a default step value of 1, which means you can't enter a decimal value like 1.1 when submitting a form--the browser's implementation of form validation will block form submission.

I don't like the idea of a separate component for each input type, I think this would be hard to maintain and possibly more complicated to use.

Note that min, max, and step are also valid attributes for date-time in addition to number input types.

What about setting min and max attributes only when counter is false? It seems like you would use min/max attributes to validate numeric input values rather than a counter anyway, so no functionality is lost.

The step field should be able to come through as is, since it's not currently used in the vuetify API

[johnleider]

I agree with applying min/max if counter is false, seems like the best implementation.

[NicKAnderson038]

Use @focus to apply a max & min number validation to your :rules. Make sure to set the max with large default number. Both max & min default will be updated upon focusing on that specific input box.

template**

data**

methods**