Skip to content

fixes #361 - use $event.target.valueAsNumber for number/range inputs,… #363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

zoul0813
Copy link
Member

fixes #361 - use $event.target.valueAsNumber for number/range inputs, debounce formatValueToModel for number/range, removed formatValueToField

Number inputs now support 10e10 formats being typed in, and stores the evaluated value of 10e10 (100000000000) on the model.

  • moved debouncedFormatDateTime to abstractField and renamed to debounceFormatFunc
  • create a debounceFormatFunc for number/range inputs, as well as date/datetime/datetime-local
  • changed @input to use onInput handler which checks for number/range and uses $event.target.valueAsNumber per @YgamiLight
  • set value to NaN if !isNumber(value) (NOTE: NaN is represented as "null" in JSON though as JSON does not support NaN/Infinity)
  • set all inputType checks and uses to use inputType.toLowerCase(), recommend doing this for all fields
  • created DEBOUNCE_FORMAT_MS constants in inputField.vue, set to default of 1000 ... recommend turning this into a standard schema option for all fields
  • wrapped one-liner conditionals with {} (just looks cleaner)

…/range inputs, debounce `formatValueToModel` for number/range, removed `formatValueToField`

Number inputs now support `10e10` formats being typed in, and stores the evaluated value of `10e10` (`100000000000`) on the model.

* moved debouncedFormatDateTime to abstractField and renamed to debounceFormatFunc
* create a `debounceFormatFunc` for number/range inputs, as well as date/datetime/datetime-local
* changed @input to use `onInput` handler which checks for number/range and uses $event.target.valueAsNumber per @YgamiLight
* set value to NaN if !isNumber(value) (NOTE: NaN is represented as "null" in JSON though as JSON does not support NaN/Infinity)
* set all `inputType` checks and uses to use `inputType.toLowerCase()`, recommend doing this for all fields
* created DEBOUNCE_FORMAT_MS constants in inputField.vue, set to default of 1000 ... recommend turning this into a standard schema option for all fields
* wrapped one-liner conditionals with `{}` (just looks cleaner)
@zoul0813 zoul0813 self-assigned this Dec 13, 2017
@zoul0813 zoul0813 requested a review from icebob December 13, 2017 16:20
Copy link
Member

@icebob icebob left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great!

@icebob
Copy link
Member

icebob commented Dec 13, 2017

@zoul0813 You can merge it if it's done.

@zoul0813 zoul0813 merged commit 2b579cd into vue-generators:master Dec 13, 2017
@zoul0813 zoul0813 deleted the feature/361-fix-number-values branch December 13, 2017 19:01
@lionel-bijaoui
Copy link
Member

In IE11, valueAsNumber return NaN for any value.
In Edge, there is also problem with it.
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/669685/#error

I'm going to make a PR

@lionel-bijaoui lionel-bijaoui mentioned this pull request Jun 27, 2018
3 tasks
@YagamiNewLight
Copy link

@lionel-bijaoui Thanks, you really did a great job!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Value of number type input
4 participants