@child() decorator does not work properly in combination with if.bind
- 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
```
**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
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