can't set 'onchange' event in select tag
YerkoPalma opened this issue · comments
I just ran into this but I'm not sure if it is my mistake or an issue.
When setting something like
function mainView (state, emit) {
return html`
<body>
<select onchange="${onchange}">
${state.opts.map((opt, i) => {
return html`<option value="${i}">${opt}</option>`
})}
</select>
<button onclick=${onclick}>Run</button>
</body>
`
function onclick () {
console.log('click!')
}
function onchange() {
console.log('change!')
}
}The click event is normally attached to the button, but the change event isn't attached to the select tag.
I saw in comments that some elements need speacial treatment to set events, but there is no special treatment for select tags, even tho there is in morphdom. Is there something missing? or am I doing something wrong?
Could you perhaps write a test case for this? We have like 400 tests at the moment; and legit the only way to make this stuff work, and prevent regressions is through testing. Thanks!
Even though we seem to be looking out for onchange in our events though (https://github.com/choojs/nanomorph/blob/master/lib/events.js#L32) — I think you might be right we're missing something.
This snippet can reproduce the issue for me.
var morph = require('nanomorph')
var html = require('bel')
var tree = html`
<div>
<select onchange="${onchange}">
<option>1</option>
<option>2</option>
</select>
</div>`
document.body.appendChild(tree)
morph(tree, html`
<div>
<p>morphed!</p>
<select onchange="${onchange}">
<option>A</option>
<option>B</option>
</select>
</div>`)
function onchange (e) {
e.preventDefault()
alert('change')
}
As you can see, the content is correctly morphed, but there is no change event bound to the select tag
@yoshuawuyts
I added some event testing for this issue. The tests pass. The event testing code I added should be useful for almost all event testing. #88 Please take a look and let me know if you have any feedback.
@YerkoPalma
Is this error possibly the result of the quotes:
onchange="${onchange}"
I note that when they are removed it seems to works fine. Ex:
onchange=${onchange}
@him2him2 thanks so much for the tests! — having more of these tests would be amazing to have; they're the only line of defense we have against introducing regressions; so the more, the better! 😁
@him2him2 thanks for testing.
Is this error possibly the result of the quotes
Oh yeah 😭 I've faced this error before, can't test now but I'm almost sure this is the cause. Totally my fault, sorry.
Closing.