Row wise tabindex lost focus after few continuous tabs

Question

I have an ui-grid with just 1 column and about 1000 rows. Each row have a textbox in it. I want to navigate through textbox by tab. This works fine about 10 - 15 rows, after that the textbox is losing its focus, then if you press tab again, it will skip next few rows and jump to a further textbox.

See the issue plnkr here

UI-Grid options:

$scope.gridOptions = {
    rowHeight: '200',
    enableColumnMenus: false,
    paginationPageSize: 2000,
    columnDefs: [
      {name:"value", width:'*',
        cellTemplate: gridTemplate,
      }
    ],
    data: gridData
};

Mellophone

Answer 1

Why this behavior happens:

ui.grid has his own ui.grid.infiniteScroll module however by default it doesn't render all your 1000 items because of performance penalty.

If you will inspect DOM structure of the table you will find that ui.grid renders 15 items only and udates it on scrolling (scroll triggers also on tab click). This is a reason why 1st 15 items work properly with focus on tab click.

When you reach index 16, ui.grid re-render 15 items with new indexes and therefore you lose the focus.

I saw you opened also this issue on github/issues and I believe its ui.grid bug in addition to 1479 others :).

From history ui.grid has about 200 issues related to focus and it looks like their developers don't hurry up to fix them because its too complicated and can cause to regression.

So my conclusion is just to live with it or use pagination structure.

Bellona

Answer 2

Whatever @Maxim mentioned is absolutely true. To get rid of this issue, what you can do as workaround is set virtualThreshold = 50 and than use pagination, so that focused is not lost.

Cyr

Answer 3

You can hack your way around it by catching the TAB key press event, and override the default behavior.

Each textbox will listen on key-press event, passing focus to the next textbox.

Here is an example that can help.

However, 1000 inputs sounds like a bad UX, and probably will have bad performance.

Mcgarry