Вкладка к первому элементу, когда реагирующая виртуализация прокручивается вниз

Question

Я использую реагирующе-виртуализированную библиотеку .И мне нужно иметь возможность перемещаться по списку.

Поскольку не все элементы отображаются, я не могу перейти к последней строке

Аналогичная проблемапроизойдет, если я захочу перейти к первой строке 1010 *, когда виртуальный список прокрутится до конца списка

Если я смог , всегда отрисовыватьпервый ряд и последний ряд, независимо от положения прокрутки, я смогу перейти к элементам последний и первый .

Вариант использования:

Представьте, что в данный момент фокус находится на поле ввода, которое расположено над виртуальным списком, и представьте, что виртуальный список прокручивается вниз.

Если я нажму на вкладке клавиатуры, я ожидаю, что мой фокус будет на первом элементе.Но поскольку первый элемент не отображается, фокус будет на первой строке отображаемого виртуального списка.Я надеюсь, что это имеет смысл.

Это мой текущий код:

class Locations extends React.Component {

  setListElementRef = (ref) => {
    this.listRef = ref;
  }

  rowRenderer = ({ index, style }) => {
    return (
      <div style={style} key={index} >
        <CheckBoxContainer />
      </div>
    );
  }

  render() {
    const {
      filteredLocations, onSearchValueChange,
    } = this.props;

    return (
          <List
            tabIndex={-1}
            isScrollingOptOut
            ref={this.setListElementRef}
            rowRenderer={this.rowRenderer}
            rowCount={filteredLocations.length}
            rowHeight={32}
            height={300}
            width={218}
            overscanRowCount={5}
          />
    );
  }
}