Range input not UI does not update until directly interacted with
rreusser opened this issue · comments
Version: yo-yo@latest
browserified and running in Chrome 55.0. Works as expected in Firefox.
Expected behavior: when yo-yo
updates range input attributes, the UI updates to match even before you've interacted with the range input directly.
Observed behavior: the range input value
attribute is updated via yo.update
, but the UI does not change to match. However, once I've directly dragged the range input, the same update does change the UI.
Live example (nearly identical to video; slightly simplified): http://codepen.io/rsreusser/pen/vyPKbg?editors=1010
Code to reproduce:
var yo = require('yo-yo');
var makeSlider = value => yo`
<div>
<input type="range" min="0" max="100" value="${value}">
<input type="number" id="number" min="0" max="100" value="${value}">
</div>
`;
var slider = makeSlider(50);
document.body.append(slider);
document.getElementById('number').addEventListener('input', function (e) {
yo.update(slider, makeSlider(e.target.value));
});
Analysis: It's not clear to me whether this is a morphdom issue, a yo-yo issue, a browser issue, or my issue, but I've narrowed things down to behavior that doesn't make sense to me. I fear the answer is: All of the pieces are functioning as intended and this is simply one of those weird browser quirks that fits into an "undefined behavior" sort of gap. 😄
References (of questionable relevance):
- This seems similar: patrick-steele-idem/morphdom#88
- Ditto: choojs/choo#253
- This hints that the cause of this feature may be rigorous adherence to specs (combined with my lack of knowledge of the specs): Input range thumb do not refreshes after changed max value
Interesting. #15 possibly relevant? Perhaps an extra layer is necessary to handle these subtleties? I'm still trying to wrap my head around all the parts.
See: nanomorph#6 for followup experiment. Seems the event handler may not be getting copied over after switching to nanomorph, but the above example with nanomorph instead isn't demonstrating the initial update problem.