How to focus a p:dataTable single selectable row using JavaScript

Question

PrimeFaces has excellent keyboard support. See for example, the showcase of a selectable p:dataTable. When you click a row in the "Single with Row Click" table, you are able to use the arrow keys to navigate rows and use the enter to select the focused row.

I would like to be able to set the focus on a row in a (single) selectable p:dataTable using JavaScript.

I checked the client side API documentation for DataTable and the code of the row click handler, and I assume it has something to do with the originRowIndex and cursorIndex properties. But setting them to 0 (in the JavaScript console) does not trigger a focus. Also, when I focus a row, and then focus the JavaScript console, the focus gets lost, making it hard to figure out what is going on.

Then I checked the code of the keydown handler. This made me try the following (again, on the console):

var widget = PF('widget');
row = $('tbody tr', widget.jq).eq(0);
widget.focusedRow = row;
widget.highlightFocusedRow();
row.focus();

This will highlight the first row, but the focus is not set. I think I'm close, but stuck with the focus issue.

How about widget.getFocusableTbody().trigger('focus') which should give the focusable TBODY the focus? — Melloware
That works, but not from the console. If I use the location bar with javascript:... it does work. Thanks! — Jasper de Vries

Melloware Melloware · Accepted Answer · 2021-02-17T13:33:00

The trick is to focus the focusable TBODY.

widget.getFocusableTbody().trigger('focus');

But you will still be facing the issue trying to set focus from the console. See Unable to set focus and cursor to input text using javascript in Chrome Console

How to focus a p:dataTable single selectable row using JavaScript

1 Answers