I'm submitting a bug report
Please tell us about your environment:
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
<template>
<require from="./simple-component/simple-component"></require>
<button click.delegate="toggleContainers()">Toggle Containers</button>
<div class="container-1"
if.bind="showMainContainer">
<simple-component>
<input type="text" id="test-input">
</simple-component>
</div>
<div class="container-2" else>Placeholder container</div>
</template>
app.ts
export class App {
showMainContainer: boolean = true;
toggleContainers() {
this.showMainContainer = !this.showMainContainer;
}
}
simple-component.html
<template>
<slot></slot>
<span>Some Input Suffix</span>
</template>
simple-component.ts
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: 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.
I'm submitting a bug report
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 aninputelement.app.html
app.ts
simple-component.html
simple-component.ts
On initial load, reference in
myInputproperty is correct. But if we click "Toggle Containers" button two times (to remove and addcointainer-1element to the DOM again) thenmyInputproperty points tonull. I noticed that current behaviour is caused by this commit: 7989015. In previous versions of this plugin everything worked fine, even in scenario described above.Expected/desired behavior:
Component's property decorated with
@childdecorator should reference appropriate element even if component's parents are added or removed conditionally.