Issue with interpolation binding inside HTML <option> element

[glen-84]

I'm submitting a bug report

• Library Version:
  2.2.0

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  10.15.1

• NPM Version:
  6.4.1

• JSPM OR Webpack AND Version
  any

• Browser:
  all

• Language:
  all

Current behavior:
Using an interpolation binding inside an HTML <option> breaks the bound value of the select element.

f.e.

  <select value.bind="selectedProduct.id">
    <option model.bind="null">${theDefault}</option>
    <option repeat.for="product of products" model.bind="product.id">
      ${product.name}
    </option>
  </select>

Remove ${theDefault} here (replace it with a static string), and everything works as expected.

Alternatively, changing void to await in the VM activate method works around the issue.

Expected/desired behavior:
(The GistRun example is outdated, see jdanyow/rjs-bundle#5)

https://codesandbox.io/s/nwvzx649yl

• What is the expected behavior?

CPU should be selected.

• What is the motivation / use case for changing the behavior?

1. This worked in previous versions.
2. We need to use a dynamic option label (we're actually using a computed property)
3. We don't want to await loading of the items (it will delay rendering of the view)

---

@bigopon Could this be related to #677?

[bigopon]

@glen-84 Could you help describe how it is breaking a bit? I changed void to await and see CPU everytime. Sandbox https://codesandbox.io/s/ql5o7k2zo6

[glen-84]

We used to avoid using await here so that the view could be rendered faster while the select items are "lazy loaded". If there are 5 selects all requiring remote data, this could slow things down quite a bit (even with Promise.all, when possible).

If you omit the await, but change ${theDefault} to -- (for example), it works again.