Using return/enter key to save edited cell in Primefaces 3.4 in-cell editable datatable

Question

As the title says, instead of clicking on the "Save" button after switching to edit-mode, I would like to have the same functionality when pressing the enter/return-key.

I attempted to do this with p:hotkey but apparently p:hotkey will not work with focused editable components.

Is there any other way to do this than delving into JQuery?

Answer 1

Is there any other way to do this than delving into JQuery?

Yes, using plain vanilla JS. But this ends up in possibly non-cross-browser-compatible boilerplate code. No kidding, no this isn't possible via JSF as the magic really needs to happen in the client side. As the <p:cellEditor> doesn't support the requested feature (so that it could otherwise just generate the necessary jQuery code all by itself), you need to write it yourself.

Been there, done that:

$(document).on("keydown", ".ui-cell-editor-input input", function(event) {
    if (event.keyCode == 13) {
        $(this).closest("tr").find(".ui-row-editor .ui-icon-check").click();
    }
});

Just put it in some global JS file. This covers all input fields inside cell editors.