if.bind both in and outside the custom element causes ref not to be populated when re-binding

[aqm5181]

I'm submitting a bug report

• Library Version:
  1.5.1

Please tell us about your environment:

• Operating System:
  Windows 10 x64

• Node Version:
  8.6.0

• NPM Version:
  5.3.0

• JSPM OR Webpack AND Version
  Aurelia CLI 0.31.3

• Browser:
  Chrome 61.0.3163.100

• Language:
  TypeScript 2.08

Current behavior:

1. Create project with au new

main.ts

import {Aurelia} from 'aurelia-framework'
import environment from './environment';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  aurelia.start().then(() => aurelia.setRoot());
}

app.ts

export class App {
  public toggle = false;
  public elemvisible = true;
}

app.html

<template>
  <require from="./item-details"></require>
  <label>
    <input type="checkbox"
           checked.bind="elemvisible">
    Elem Visible
    <input type="checkbox"
           checked.bind="toggle">
    toggle
  </label>
  <div>
    <div if.bind="toggle">
        <item-details elemvisible.bind="elemvisible"></item-details>
    </div>
  </div>
</template>

item-details.ts

import { bindable } from "aurelia-framework";
import {bindingMode} from "aurelia-binding";

export class ItemDetails {

  @bindable elemvisible: boolean;
  detailsEl: Element;

  attached() {
    console.log('attached', this.detailsEl);
  }

  detached() {
    console.log('detached', this.detailsEl);
  }
}

item-details.html

<template>
  <div if.bind="elemvisible">
    Stuff:
    <div element.ref="detailsEl">Displayed</div>
  </div>
</template>

When toggling the "toggle" checkbox the first time, elDetails in custom element is referenced correctly, however subsequent toggles return null for it. This only happens if there is an if.bind both within the custom element and also in the parent page.

Example: https://gist.run/?id=a981dc20a5cc72439349c02df465ebe7

Similar to issue #298 except for the additional if.bind in the parent page.

Expected/desired behavior:

• What is the expected behavior?
  Subsequent toggles of "toggle" checkbox should ensure a reference to elDetails in the attached event as long as elemvisible is true.

[adrinr]

I just entered to report the same issue. I'm having the same behaviour in my application

[bigopon]

@EisenbergEffect This was fixed by #331