inconsistent interpretation of html spec in handling of input "checked" attribute

[tomconnors]

Bug Report

• datastar special cases the "value" attribute of input elements; when patching elements, if an <input> has a changed "value", a corresponding change is made to the input's value property.
• datastar does not similarly special case the "checked" attribute of input elements; when patching elements, if an input's "checked" attribute has changed, the input's "checked" property is not updated.
• "value" and "checked" are similarly defined in the html spec (https://html.spec.whatwg.org/#attr-input-value); the spec suggests no reason d* should handle them differently.

A change that that would resolve this inconsistency:

• datastar should special-case the input attributes "checked" and "disabled" the same way it currently special cases "value".
• datastar should also special case the <option> "selected" attribute, which is described in the html spec similarly to input.value and input.checked.
• in case it's helpful, this file shows what elements and attributes morphdom handles specially: https://github.com/patrick-steele-idem/morphdom/blob/master/src/specialElHandlers.js

These changes would simplify the HTML included in some patch-elements events. Instead of toggling a checkbox with:

<input type="checkbox" data-on-load="el.checked = true;" />

users could write:

<input type="checkbox" checked />

This also seems like a more intuitive behavior. It seems unlikely someone would send down <input type="checkbox" checked /> and only want to change the default checkedness of the input.

Datastar Version

v1 rc 5

[bencroker]

This behaviour was changed in v1.0.0-RC.3 based on bigskysoftware/idiomorph#27 (comment), as our morphing strategy is a derivative of Idiomorph.

Have we thought about special casing other attributes, @jmstevers?

[gazpachoking]

It looks like idiomorph special cases 'checked', 'disabled', and 'selected'
https://github.com/bigskysoftware/idiomorph/blob/10224e0841d4b14bead9f6fd9ac2dfa2d030b4c7/src/idiomorph.js#L735-L736

[bencroker]

So it does! Shame their changelog isn’t kept up-to-date.

[jmstevers]

We should also change how <textarea> diffing is handled to be the same as <input> diffing. Right now we do this:

if (
  oldElt instanceof HTMLTextAreaElement &&
  newElt instanceof HTMLTextAreaElement
) {
  if (newElt.value !== oldElt.value) {
    oldElt.value = newElt.value
  }
  if (oldElt.firstChild && oldElt.firstChild.nodeValue !== newElt.value) {
    oldElt.firstChild.nodeValue = newElt.value
  }
}

which wipes the textarea's value if the incoming textarea's value is not the same as the value on the page.