I have a controlled <select> and onchange a choo state variable is updated, the view function is rerendered and the newly selected <option> should now be selected. The actual behavior is very confusing though:
When the function renders the first time the DOM looks like this
Now here are a few console.log statements that I put in updateAttribute of morphdom
function updateAttribute (newNode, oldNode, name) {
console.log(newNode)
console.log(newNode.selected)
console.log(oldNode)
console.log(oldNode.selected)
When the user chooses 2016, the log statements evaluate to this:
<option value="2017">2017</option>true why? :[
<option value="2017" selected="">2017</option>false Seems okay I guess
and
<option value="2016" selected="selected">2016</option>false O_o
<option value="2016" selected="selected">2016</option>false Ó_ò
It's late and it's been confusing, so maybe this is totally expected, but I don't it. The booleans seem off though. My intuition says something is mutating the nodes in between other actions but that doesn't sound right. And that getAttribute and properties are not always the same is known but that it would cause such a bug also sounds odd. Lastly, maybe I am just making a grave mistake here somewhere?
I was actually able to fix this by changing updateAttributes to
function updateAttribute (newNode, oldNode, name) {
if (newNode.getAttribute(name) !== oldNode.getAttribute(name)) {
oldNode.setAttribute(name, newNode.getAttribute(name))
if (newNode.getAttribute(name)) {
oldNode.setAttribute(name, '')
} else {
oldNode.removeAttribute(name, '')
}
}
}
Note that I replaced the calls to node.selected with node.getAttribute('selected'). I didn't fork and run tests and I didn't manually check anything else because I really need to sleep now. But please let me know
a) if my bug is known and there's a workaround I couldn't find
b) my "discoveries" are expected behavior and I just don't it
The repo where this bug happens is https://github.com/cideM/tinyfinancial on the
details
branch (https://github.com/cideM/tinyfinancial/blob/details/src/client/views/Details/index.js). But it requires MongoDB and one would have to remove the facebook authentication. But maybe I'll be able to explain my issue through code examples as well.I have a controlled
<select>
andonchange
a choo state variable is updated, the view function is rerendered and the newly selected<option>
should now beselected
. The actual behavior is very confusing though:When the function renders the first time the DOM looks like this
If the user select 2016, the DOM looks like this
Note the leftover
selected=""
.Now here are a few
console.log
statements that I put inupdateAttribute
of morphdomWhen the user chooses 2016, the log statements evaluate to this:
<option value="2017">2017</option>
true
why? :[<option value="2017" selected="">2017</option>
false
Seems okay I guessand
<option value="2016" selected="selected">2016</option>
false
O_o<option value="2016" selected="selected">2016</option>
false
Ó_òIt's late and it's been confusing, so maybe this is totally expected, but I don't it. The booleans seem off though. My intuition says something is mutating the nodes in between other actions but that doesn't sound right. And that
getAttribute
and properties are not always the same is known but that it would cause such a bug also sounds odd. Lastly, maybe I am just making a grave mistake here somewhere?I was actually able to fix this by changing
updateAttributes
toNote that I replaced the calls to
node.selected
withnode.getAttribute('selected')
. I didn't fork and run tests and I didn't manually check anything else because I really need to sleep now. But please let me know a) if my bug is known and there's a workaround I couldn't find b) my "discoveries" are expected behavior and I just don't it