max-mapper / yo-yo

A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals
1.33k stars 65 forks source link

Adding select options always sets select value to last item #57

Open timwis opened 7 years ago

timwis commented 7 years ago

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?

juliangruber commented 7 years ago

does this work?

? yo`<option value="" selected>Select...</option>`
timwis commented 7 years ago

That doesn't seem to have an effect :/