waitForProperty bug

components.my-component\.js

import Evented from '@ember/object/evented';
import Component from '@ember/component';
import $ from 'jquery';
import { task, timeout, waitForEvent, waitForProperty } from 'ember-concurrency';

export default class EventsExampleComponent extends Component.extend(Evented) {
// BEGIN-SNIPPET waitForEvent
  domEvent = null;
  @task *domEventLoop() {
    while(true) {
      let event = yield waitForEvent(document.body, 'click');
      this.set('domEvent', event);
      this.trigger('fooEvent', { v: Math.random() });
    }
  }


  jQueryEvent = null;
  @task *jQueryEventLoop() {
    let $body = $('body');
    while(true) {
      let event = yield waitForEvent($body, 'click');
      this.set('jQueryEvent', event);
    }
  }

  emberEvent = null;
  @task *emberEventedLoop() {
    while(true) {
      let event = yield waitForEvent(this, 'fooEvent');
      this.set('emberEvent', event);
    }
  }

  didInsertElement() {
    super.didInsertElement(...arguments);
    this.domEventLoop.perform();
    this.jQueryEventLoop.perform();
    this.emberEventedLoop.perform();
    this.waiterLoop.perform();
  }
// END-SNIPPET


// BEGIN-SNIPPET waitForEvent-derived-state
  @task *waiterLoop() {
    while(true) {
      yield this.waiter.perform();
      yield timeout(1500);
    }
  }

  @task *waiter() {
    let event = yield waitForEvent(document.body, 'click');
    return event;
  }
// END-SNIPPET

// BEGIN-SNIPPET waitForProperty
  @task *startAll() {
    this.set('bazValue', 1);
    this.set('state', "Start.");
    this.foo.perform();
    this.bar.perform();
    this.baz.perform();
  }

  @task *foo() {
    yield timeout(500);
  }

  @task *bar() {
    yield waitForProperty(this, 'foo.isIdle');
    this.set('state', `${this.state} Foo is idle.`);
    yield timeout(500);
    this.set('bazValue', 42);
    this.set('state', `${this.state} Bar.`);
  }

  bazValue = 1;
  @task *baz() {
    let val = yield waitForProperty(this, 'bazValue', (v) => v % 2 === 0);
    yield timeout(500);
    this.set('state', `${this.state} Baz got even value ${val}.`);
  }
// END-SNIPPET
}

controllers.application\.js

import Controller from '@ember/controller';
import { waitForProperty, task, timeout } from 'ember-concurrency';
import {action} from '@ember/object';

export default class ApplicationController extends Controller {
   @task *startAll() {
    this.set('bazValue', 1);
    this.set('state', "Start.");
    this.foo.perform();
    this.bar.perform();
    this.baz.perform();
  }

  @task *foo() {
    yield timeout(500);
  }

  @task *bar() {
    yield waitForProperty(this, 'foo.isIdle');
    this.set('state', `${this.state} Foo is idle.`);
    yield timeout(500);
    this.set('bazValue', 42);
    this.set('state', `${this.state} Bar.`);
  }

  bazValue = 1;
  @task *baz() {
    let val = yield waitForProperty(this, 'bazValue', (v) => v % 2 === 0);
    yield timeout(500);
    this.set('state', `${this.state} Baz got even value ${val}.`);
  }
}

templates.application\.hbs

<MyComponent/>

templates.components.my-component\.hbs

<h3>waitProperty bug demo: waitProperty doesn't seem to work when waiting for task's isIdle property to change</h3>

<p>
  Expected behavior: when foo task completes, its isIdle property should become true, and the
  waitForProperty(this, 'foo.isIdle') in the bar task should complete and bar should continue executing.
  Actual behavior: bar task gets stuck on waitForProperty(this, 'foo.isIdle') even when foo.isIdle becomes true
</p>

<button {{on "click" (perform this.startAll)}} type="button">
  Start
</button>

<h5>
  State: {{this.state}}
</h5>

<h5>
  foo.isIdle: {{foo.isIdle}}
</h5>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-concurrency": "2.0.3"
  }
}