Строковый tabindex потерял фокус после нескольких непрерывных вкладок

У меня есть ui-сетка с 1 столбцом и около 1000 строк. Каждая строка содержит текстовое поле. Я хочу перейти через текстовое поле по вкладке. Это отлично работает с 10-15 строками, после чего текстовое поле теряет фокус, затем, если вы снова нажмете вкладку, он пропустит следующие несколько строк и перейдет в другое текстовое поле.

См. вопрос plnkr здесь

Параметры UI-Grid:

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

Ответ 1

Почему такое поведение происходит:

ui.grid имеет свой собственный модуль ui.grid.infiniteScroll, но по умолчанию он не отображает все ваши 1000 элементов из-за снижения производительности.

Если вы проверите структуру DOM таблицы, вы обнаружите, что ui.grid отображает только 15 элементов и удаляет их при прокрутке (триггеры прокрутки также при нажатии кнопки). Это причина, по которой первые 15 элементов работают правильно, с акцентом на нажатие на вкладку.

Когда вы достигнете индекса 16, ui.grid повторите рендеринг 15 элементов с новыми индексами и, следовательно, вы потеряете фокус.

Я видел, как вы открыли эту проблему на github/issues, и я считаю, что ее ошибка ui.grid в дополнение к 1479 другим:).

Из истории ui.grid имеет около 200 вопросов, связанных с фокусом, и похоже, что их разработчики не торопятся исправлять их, потому что это слишком сложно и может привести к регрессии.

Итак, мой вывод - просто жить с ним или использовать структуру разбиения на страницы.

Ответ 2

Независимо от того, о чем упоминалось @Maxim, абсолютно верно. Чтобы избавиться от этой проблемы, то, что вы можете сделать, как обходной путь, устанавливается virtualThreshold = 50, а не использовать разбиение на страницы, так что сфокусированный не теряется.

Ответ 3

Вы можете взломать его, поймав событие нажатия клавиши TAB и переопределив поведение по умолчанию.

Каждое текстовое поле будет прослушивать событие нажатия клавиши, передавая фокус на следующее текстовое поле.

Вот пример, который может помочь.

Однако 1000 входов звучат как плохой UX и, вероятно, будут иметь плохую производительность.