"ref" attribute is set to null after element is removed with "if" attribute

[decademoon]

app.js

export class App {
  isVisible = false;
}

app.html

<template>
  <button click.delegate="isVisible = !isVisible">Toggle Visibility</button>
  <div if.bind="isVisible">
    <div ref="elem">Ref value: <strong>${elem === null ? 'null' : elem}</strong></div>
  </div>
</template>

The first time you click the button, the ref value will be set correctly. If you click the button two more times to hide and show the div, then the ref value will be null. Is this expected behavior?

I've created the issue here if you want to check it out: https://github.com/decademoon/aurelia-ref-null

[coud]

I've confirmed this bug too

[EisenbergEffect]

Well, the ref binding does null out the property when it is unbound. It was done originally, thinking that there might be a memory leak issue if it was left hanging around. However, this would probably only be an issue if the view model was a singleton and not disposed along with its view.

But, that may not be addressing the issue. It sounds like when the view is re-bound that it isn't getting the ref set again. I will need to explore this further...

[coud]

Right, the ref is not being bound again to the model property when the custom element is attached.

[kevmeister68]

@EisenbergEffect, can you confirm that your commit from Aug 4 actually fixed the problem concerning rebinding the ref when the view is re-bound?

[EisenbergEffect]

@kevmeister68 It should have, yes. However, there have been more changes made to the ref binding command since last year. Are you having an issue? If so can you create a new ticket on Github and cc @jdanyow on that. If there's an issue, he's the best person to track it down.

[jdanyow]

@kevmeister68 looks like it's working: https://gist.run/?id=cae35b0bfd7510d797e8e0ef88b4af2c