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, Feb 17 '21 at 13:10
That works, but not from the console. If I use the location bar with `javascript:...` it does work. Thanks! — Jasper de Vries, Feb 17 '21 at 13:30

score 2 · Accepted Answer · edited Feb 17 '21 at 13:45

2

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

edited Feb 17 '21 at 13:45

Jasper de Vries

19,370
6
64
102

answered Feb 17 '21 at 13:33

Melloware

10,435
2
32
62

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

1 Answers1