aurelia - ドロップダウンを使用した後、Aurelia ダイアログが応答を返さない

Question

aurelia-dialog プラグインを使用して、ユーザーが一連のオブジェクトを生成できるようにし、ダイアログの応答で選択したオブジェクトを返すようにしたいと考えています。

ワークフローは、ダイアログで activate() メソッドが呼び出されたときに、promise を使用して API 呼び出しからオプションのリストが生成されるというものです。次に、オプションがユーザーに表示され、ドロップダウンから選択されます。ユーザーが [OK] をクリックすると、応答が返されます。これを達成するはずのコードは次のとおりです。

this.ds.open({
  viewModel: MyModal,
  model: {
    "title": "Select Objects",
    "message": "I hate this modal"
  }
}).then(response => {
  console.log("closed modal");
  console.log(response);

  if (!response.wasCancelled) {
    console.log('OK');
  } else {
    console.log('cancelled');
  }
  console.log(response.output);
});

そして modal.js で:

import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';
import {ModalAPI} from './../apis/modal-api';

//@inject(ModalAPI, DialogController)
export class MyModal {
  static inject = [DialogController, ModalAPI];

  constructor(controller, api){
    this.controller = controller;
    this.api = api;

    controller.settings.centerHorizontalOnly = true;
  }

  activate(args){
    this.title = args.title;
    this.message = args.message;
    this.returnedSet = null;
    this.historicSetName = null;
    this.reportHist = null;


    return this.api.getReportHistory().then(reports => {
      this.reportHist = reports;
    });
  }

  selectHistoricReport() {
    console.log(this.historicSetName);
    if(this.historicSetName == "Select a report...") {
        this.returnedSet = null;
    } else {
        var selectedReport = this.reportHist.filter(x => x.name == this.historicSetName)[0];
        this.returnedSet = selectedReport.rsids;
    }
    console.log(this.returnedSet);
  }

  ok(returnedSet) {
    console.log(returnedSet);
    this.controller.ok(returnedSet);
  }
}

そして、html：

<template>
  <require from="../css/upload-set.css"></require>
  <ai-dialog class="selector panel panel-primary">
    <ai-dialog-header class="panel-heading">
    <button type="button" class="close" click.trigger="controller.cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">${title}</h4>
    </ai-dialog-header>
        <ai-dialog-body class="panel-body container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <label>Report: </label>
          <select value.bind="historicSetName" change.delegate="selectHistoricReport()" class="input-md form-control">
            <option ref="historicSetPlaceholder">Select a report...</option>
            <option repeat.for="historicReport of reportHist">${historicReport.name}</option>
          </select>
        </div>
      </div>
        </ai-dialog-body>
        <ai-dialog-footer>
            <button click.trigger="controller.cancel()">Cancel</button>
            <button click.trigger="ok(returnedSet)">Save</button>
        </ai-dialog-footer>
    </ai-dialog>
</template>

ドロップダウンに触れない限り、ダイアログは null (または、returnedSet を初期化したその他の値) を返します。ただし、ドロップダウンをクリックするとすぐに、[保存] または [キャンセル] ボタンをクリックしても何も返されず、最初のコード ブロックの最後の console.log 行がスキップされます。また、HTML から click.delegate 行を削除しようとしましたが、何も変わりませんでした。

なぜこれが起こっているのか誰にも分かりますか？また、この投稿 ( Aurelia Dialog and Handling Button Events ) で非常によく似た問題が見つかりましたが、何をすべきかについて解決策が見つからないようです。

前もって感謝します。