checkbox problem

[devmondo]

hi,
great lite lib :)

i just faced an issue, it is really simple to describe, i have the following original dom

<div id="mount" >
    <input type="checkbox" checked>
</div>

then i want to diff it with

<div id="mount" >
    <input type="checkbox" >
</div>

first time it works and the check box is unchecked, now if i check the check box again and try to diff it with the below again, the check box stays checked

<div id="mount" >
    <input type="checkbox" >
</div>

now i know this is basic input elements problem, but i was wondering what is your view on it in terms of a diffing lib

thx in advanced.

[DylanPiercey]

@devmondo, set-dom works differently than react in that it will only update attributes via 'setAttribute'. Browsers only care about the 'checked', 'value' and 'selected' attributes when they have not been modified by the user which is typically useful because you don't want to overwrite the users input and mess with their experience. In set-dom checked is the equivalent of defaultChecked in react.

A quick an easy work around is to give the checkbox a data-key attribute that uses it's checked value, this way every time it's checked state changes it will re-render, like so:

const isChecked = false
const html = `<div id="mount" >
    <input type="checkbox" data-key={`my-input-${isChecked}`} ${isChecked ? 'checked' : ''}>
</div>`

Let me know if this works well enough for you or if I can help you out further.
I would also recommend checking out https://github.com/DylanPiercey/as-html for safe html template strings :D.

[devmondo]

brilliant mate, it is working now perfectly :)

i see exactly what you mean now, so the moment data-key change it is a trigger for set-dom to force re-render the element.

ohh and as-html is brilliant :)

[DylanPiercey]

Glad to hear that works for you!