Adding select options always sets select value to last item

[Tim Wisniewski]

If you have an empty <select> box and then later add items to it, the "selection" (value) of the select box always seems to be set to the final item. I would expect it to be set to the first item, as it is when you first load a select box with items in it and no explicit value set.

In my case, I'd like to keep it focused on the option that says "Select..." until the user actually selects something.

Here's a small test case. I think requirebin's gatekeeper server is down so I can't post a demo.

const yo = require('yo-yo')

const View = (items) => yo`
  <select>
    ${items.length
      ? yo`<option value="">Select...</option>`
      : ''}
    ${items.map((item) => yo`
      <option>${item}</option>
    `)}
  </select>
`

const noItems = []
const viewA = View(noItems)

document.body.appendChild(viewA)

window.setTimeout(() => {
  const aFewItems = ['a', 'b', 'c']
  const viewB = View(aFewItems)
  yo.update(viewA, viewB)
}, 3000)

Any idea what's wrong?

[Julian Gruber]

does this work?

? yo`<option value="" selected>Select...</option>`

[Tim Wisniewski]

That doesn't seem to have an effect :/