Issue with interpolation binding inside HTML `<option>` element
- Dominant language
- JavaScript
- Stars
- 110
- Forks
- 98
- PR merge metrics
- No merged PRs in 30d
Description
**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 `` breaks the bound value of the select element.
f.e.
```html
${theDefault}
${product.name}
```
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 https://github.com/jdanyow/rjs-bundle/issues/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?
Contributor guide
Research direction
Start with the CodeSandbox reproduction and compare the dynamic interpolation in the label with a static label and the void/await activate workaround. Trace the option and select binding entry points involved in the reproduction; done means CPU remains selected while the option label is computed without awaiting item loading.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100