aurelia / aurelia/binding

Issue with interpolation binding inside HTML `<option>` element

Open
#737 2 comments 3 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.