Range input not UI does not update until directly interacted with

[rreusser]

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: yoshuawuyts/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

[rreusser]

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.

[rreusser]

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.