if.bind null check is requiring me to set object to null twice

[cknightdevelopment]

Here is the relevant code for the issue I am experiencing:

JS

export class App {
  person = {
    name: "Chris"
  }

  makeNull() {
    this.person = null;
  }
}

HTML

<template>
  <div if.bind="person">
    <input type="text" value.bind="person.name" />
    <p>
      The person's name is ${person.name}
    </p>
  </div>

  <div if.bind="!person">
    Person is null
  </div>

  <button type="button" click.delegate="makeNull()">Make Person Null</button>
</template>

Note: I have a plunker to help illustrate this issue (takes a few seconds to load in plunker)

As you can see I have two simple if.bind's checking if person is truthy. If it is, the person's name is displayed in a textbox and as part of an message, otherwise the text Person is null is displayed. When I click the button, I set the person object to null via the makeNull() method. However, the textbox and message are still displayed (even though the value of person.name is correctly updated in the UI?). When I click the button a second time, the if.bind's seem to pick up the change and the Person is null text is displayed. It is worth noting that if I remove the textbox (<input type="text" value.bind="person.name" />), everything works fine.

I would expect everything to work on the first button click (first time setting person to null). Am I doing something wrong or against convention? Is this a bug? Let me know if I can provide more information.

[gheoan]

The two-way binding somehow causes this issue. With value.one-way="person.name" instead of value.bind="person.name" it works fine.

[jdanyow]

@cknightdevelopment - you're not doing anything wrong- it's this issue: https://github.com/aurelia/binding/issues/205