Aurelia: How to trigger click immediately after blur - event-handling

Question

I have a table with the Aurelia structure as follows:
//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>
Here's what the actual table in my original app looks like, the above code is a simplified version of the table. table
Basically, I want to enable the user to be able to do following:
edit any cell in any row, and on cell blur, it saves the edited value in the database.
click on the first column of any row, which is the product name, to select and highlight that particular row.
It works fine, except for the following use case:
User edits a cell in any row, and immediately clicks on the first column name (any row, not necessarily the edited row).
Ideally, it is supposed to save the edited value and select that particular row(the row whose name was clicked after editing, not necessarily the edited row) at the same time. (blur triggering the saveOption(option) and clicking on name triggering the selectProduct(product)).
But what is happening is, it triggers saveOption(option) on blur, but does not trigger selectProduct(product), somehow the blur event is preventing the click event.
Am I missing something, or is there a cleaner way to achieve two event calls simultaneously? Thanks.

Answer 1

You could pass the product to the saveOption method, and call selectProduct at the end of 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>