aurelia / aurelia/templating

@child() decorator does not work properly in combination with if.bind

Open
#675 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
113
Forks
101
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
1.10.2

**Please tell us about your environment:**
* **Operating System:**
Windows 10

* **Node Version:**
10.16.3

* **NPM Version:**
6.12.0

* **JSPM OR Webpack AND Version**
JSPM 0.16.53

* **Browser:**
all

* **Language:**
all

**Current behavior:**
Let's say we have an app, which uses the component `simple-component`. This component is placed inside container which is added/removed conditionally. This component uses `@child()` decorator to reference an `input` element.

**app.html**
```html


Toggle Containers






Placeholder container

```

**app.ts**
```typescript
export class App {
showMainContainer: boolean = true;

toggleContainers() {
this.showMainContainer = !this.showMainContainer;
}
}
```

**simple-component.html**
```html


Some Input Suffix

```

**simple-component.ts**
```typescript
import {child} from 'aurelia-templating';

export class SimpleComponent {
@child('input') myInput: any;

attached() {
console.log('myInput: ', this.myInput);
}
}
```

On initial load, reference in `myInput` property is correct. But if we click "Toggle Containers" button two times (to remove and add `cointainer-1` element to the DOM again) then `myInput` property points to `null`. I noticed that current behaviour is caused by this commit: https://github.com/aurelia/templating/commit/7989015. In previous versions of this plugin everything worked fine, even in scenario described above.

**Expected/desired behavior:**

* **What is the expected behavior?**

Component's property decorated with `@child` decorator should reference appropriate element even if component's parents are added or removed conditionally.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the reported behavior using the app.html, app.ts, simple-component.html, and simple-component.ts examples in the issue. Then read the linked commit, 7989015, and investigate how @child('input') behaves when the component's parent is removed and added by if.bind; done means myInput still references the input after toggling twice.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.