aurelia editable column keydown

Question

I have a table customelement with following tbody spec:

<tbody class="ui-datatable-data ui-widget-content">
    <tr ref="rowElement" repeat.for="rowData of dataToRender" class="ui-widget-content ${$odd ? 'ui-datatable-odd':'ui-datatable-even'} ${(selectionMode && rowElement == hoveredRow) ? 'ui-state-hover':''}" mouseenter.trigger="hoveredRow = $event.target"  mouseleave.trigger="hoveredRow = null" click.trigger="onRowClick($event, rowData,$index)">
       <td repeat.for="col of columns" attr.style.bind="col.style" attr.class.bind="col.styleClass" class="${col.editable ? 'ui-editable-column':''}"  click.trigger="switchCellToEditMode($event.target)">
           <span class="ui-column-title" if.bind="responsive">${col.header}</span>
           <span class="ui-cell-data" click.trigger="switchCellToEditMode($event.target)">${rowData[col.field]}</span>
           <input type="text" class="ui-cell-editor ui-state-highlight" if.bind="col.editable" value.bind="rowData[col.field]" blur.trigger="switchCellToViewMode($event.target)" keydown.trigger="onCellEditorKeydown($event)" />
       </td>
     </tr>
</tbody>

And the keydown trigger:

onCellEditorKeydown(event) {
    if (this.editable) {
        if (event.keyCode == 13) {
            this.switchCellToViewMode(event.target);
        }
    }
}

But the keydown.trigger makes the input impossible to write into. By removing the trigger, it's working OK.

Is there something I'm missing here?

br hw

Answer 1

Return true from the keydown event handler so the browser's default behavior isn't canceled.

Here's an example: https://gist.run?id=d9acea04776f6b20000c

app.html

<template>
  <input keydown.trigger="handleKeydown($event)">
</template>

app.js

export class App {

  handleKeydown(event) {
    // return true so the default behavior isn't canceled.
    return true;
  }

}