Aurelia: Как вызвать щелчок сразу после размытия

Question

У меня есть таблица со структурой Aurelia следующим образом:

//app.ts 

products = [{ 
    name: "book", 
    options: [{ 
     prop1: value1, 
     prop2: value2 
    }, { 
     prop1: value1, 
     prop2: value2 
    }, { 
     prop1: value1, 
     prop2: value2 
    }] 
    }, { 
    name: "notebook", 
    options: [{ 
     prop1: value1, 
     prop2: value2 
    }, { 
     prop1: value1, 
     prop2: value2 
    }, { 
     prop1: value1, 
     prop2: value2 
    }] 
    }, {..and so on}]; 


selectProduct(product) { 
    this.selectedProduct = product; 
} 

saveOption(option) { 
    // save the edited option value in the database 
} 

// app.html 

<tr repeat.for="product of products"> 
    <td click.trigger="selectProduct(product)">${product.name}<td> 
    <td repeat.for="option of product.options"> 
     <input type="text" value.bind="option.prop2" blur.trigger="saveOption(option)"> 
    </td> 
</tr> 

Вот что фактическая таблица в моем оригинальном приложении выглядит, приведенный выше код представляет собой упрощенную версию стол. table

В принципе, я хочу, чтобы позволить пользователю, чтобы иметь возможность сделать следующее:

• редактировать любую ячейку в любой строке, и на клетки размытия, он сохраняет отредактированное значение в базе данных.
• нажмите на первый столбец любой строки, которая является именем продукта, чтобы выделить и выделить эту конкретную строку.

Он отлично работает, за исключением следующего случая использования за исключением:

• Пользователь редактирует ячейку в любой строке, и сразу щелкает на первой колонке name (любой строки, не обязательно отредактированная строка).

  В идеале предполагается сохранить отредактированное значение и выбрать эту конкретную строку (строку, имя которой было нажата после редактирования, а не только отредактированная строка) одновременно. (blur, вызывая saveOption(option) и нажав на name, вызывая selectProduct(product)).

Но что происходит, оно вызывает saveOption(option) на blur, но не вызывает selectProduct(product), как-то blur события предотвращающее click события.

Я что-то упускаю, или есть более чистый способ одновременного вызова двух вызовов? Благодарю.

Answer 1

Вы могли бы передать продукт методу saveOption и вызвать selectProduct в конце saveOption

selectProduct(product) { 
    this.selectedProduct = product; 
} 

saveOption(option, product) { 
    // save the edited option value in the database 
    this.selectProduct(product); 
} 

<tr repeat.for="product of products"> 
    <td click.trigger="selectProduct(product)">${product.name}<td> 
    <td repeat.for="option of product.options"> 
     <input type="text" value.bind="option.prop2" blur.trigger="saveOption(option, product)"> 
    </td> 
</tr>