Range Elements Report Wrong Initial Value #14958
Labels
Comments
|
Reproduction with DOM API: http://jsbin.com/luxuyi/edit?html,js,console,output |
|
OK, so using the example from @locks I can see that this happens in Chrome, and Firefox, but not Safari. I suppose I should be reporting this bug upstream to the various OEMs. Does anyone have guidance on this? |
|
Firefox and Chrome are doing it right following the spec. In the absence of values for min, max and value, they get the values 0, 100 and Closing this as a non issue. Thank you! |
|
Reopening for further consideration. Thank you! |
|
@wycats / @chancancode created an issue over on the spec repo for this. Follow along at whatwg/html#2427. |
|
For the foreseeable future, if we want to fix this bug, we probably need to
special case the input type attribute and set it last
…On Thu, Mar 9, 2017 at 12:07 PM Robert Jackson ***@***.***> wrote:
@wycats <https://github.com/wycats> / @chancancode
<https://github.com/chancancode> created an issue over on the spec repo
for this. Follow along at whatwg/html#2427
<whatwg/html#2427>.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#14958 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AADaFZb8-yxtQM_1telHoW6XnPmOQCkUks5rkFwWgaJpZM4MLtvD>
.
|
Serabe
added a commit
to Serabe/glimmer-vm
that referenced
this issue
Mar 15, 2017
If a template had an `input` `range` whose type was set before a max or a min
attribute was added, the initial value would be wrong.
In plain HTML, the initial value for `<input max="10" type="range" />` would be
`5` (`(min + max) / 2 = (0 + 10) / 2 = 5`).
In Glimmer, this would be 10 because the code would be equivalent to:
```js
let input = document.createElement('input');
input.type = "range";
input.max = "10";
```
Setting `type` to `range` would make the value sanitization algorihtm to kick
in, setting the value to 50. When setting the `max` to `10`, the algorithm
would sanitize the value (50 by now) to the maximum (10).
More info in whatwg/html#2427
Fixes emberjs/ember.js#14958
|
Could this be a work around, https://github.com/trek/ember-input-range ? |
Serabe
added a commit
to Serabe/glimmer-vm
that referenced
this issue
Oct 27, 2017
If a template had an `input` `range` whose type was set before a max or a min
attribute was added, the initial value would be wrong.
In plain HTML, the initial value for `<input max="10" type="range" />` would be
`5` (`(min + max) / 2 = (0 + 10) / 2 = 5`).
In Glimmer, this would be 10 because the code would be equivalent to:
```js
let input = document.createElement('input');
input.type = "range";
input.max = "10";
```
Setting `type` to `range` would make the value sanitization algorihtm to kick
in, setting the value to 50. When setting the `max` to `10`, the algorithm
would sanitize the value (50 by now) to the maximum (10).
This was originally discussed in glimmerjs#425, but an alternative solution was
asked for. While this PR keeps part of the original implementation
(could not find a simple way to fix the issue when a template is being
rendered), this PR goes further and fixes it for Emberish components and
`...attributes` in Glimmer components.
More info in whatwg/html#2427
Fixes emberjs/ember.js#14958
Serabe
added a commit
to Serabe/glimmer-vm
that referenced
this issue
Nov 17, 2017
If a template had an `input` `range` whose type was set before a max or a min
attribute was added, the initial value would be wrong.
In plain HTML, the initial value for `<input max="10" type="range" />` would be
`5` (`(min + max) / 2 = (0 + 10) / 2 = 5`).
In Glimmer, this would be 10 because the code would be equivalent to:
```js
let input = document.createElement('input');
input.type = "range";
input.max = "10";
```
Setting `type` to `range` would make the value sanitization algorihtm to kick
in, setting the value to 50. When setting the `max` to `10`, the algorithm
would sanitize the value (50 by now) to the maximum (10).
This was originally discussed in glimmerjs#425, but an alternative solution was
asked for. While this PR keeps part of the original implementation
(could not find a simple way to fix the issue when a template is being
rendered), this PR goes further and fixes it for Emberish components and
`...attributes` in Glimmer components.
More info in whatwg/html#2427
Fixes emberjs/ember.js#14958
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Range inputs report the wrong initial value for both the native
<inputand helper/component-based{{inputsince Ember 2.10.Here's a demo Twiddle of the problem:
https://ember-twiddle.com/61645ec16fca7f5ff5a65c2b407ce94c?openFiles=components.range-element-spy.js%2Ctemplates.components.range-element-spy.hbs
And a JS Bin showing the expected behaviour:
http://output.jsbin.com/dodayozima
I'll see about writing up a failing test soon.
The text was updated successfully, but these errors were encountered: