当行启用了 tabIndex 或 contentEditable 时，使用箭头键步进器滚动是否有任何问题？

Question

我们已经使用单列网格实现了 React-Vitualized，其中的行为键盘事件启用 (onKeyUp/onKeyDown/onKeyPress)。我们正在使用 Arrow-Key-Stepper 启用 ArrowUp/ArrowDown 行滚动。

即使使用 PgUp/PgDn、Home/End、Space 和 Shift-Space，所有功能都运行良好。但是，当我们将 tabIndex and/or contenteditable 属性添加到行（键盘事件需要）时，当焦点行滚动到视图之外并从 DOM 中移除时，滚动会冻结。我们可以通过使用 Tab 键 and/or 鼠标重新获得控制权。

问题：为什么 tabIndex/contenteditable 属性导致滚动失败？

不允许我公开复制代码。不要求解决方案或代码，而是更多来自经验丰富的来源的意见。这是我们实现这个widget库的最后一期了，到目前为止效果非常好。

感谢任何 suggest/opinion。

Answer 1

However, when we add either tabIndex and/or contenteditable attributes to the rows (required for keyboard events), scrolling freezes when the focused rows scrolls out-of-view and removed from the DOM.

我很好奇为什么行本身需要这个属性？ ArrowKeyStepper 渲染的外部容器有一个 tab-index，以使其可聚焦。这就是 ArrowKeyStepper 监听键盘事件的方式。

如果该行获得焦点，那么当它离开视口时，ArrowKeyStepper 将只听...什么也没有。解决此问题的方法是使用 class 组件来渲染您的单元格并有条件地自聚焦：

class Cell extends Component {
  componentDidMount = () => this._maybeFocus();
  componentDidUpdate = () => this._maybeFocus();

  render() {
    const {
      columnIndex,
      rowIndex,
      scrollToColumn,
      scrollToRow,
      style,
    } = this.props;

    return (
      <div
        style={style}
        ref={this._setRef}
        tabIndex={1}
      >
        {/* Your content here... */}
      </div>
    );
  };

  _maybeFocus = () => {
    const {
      columnIndex,
      rowIndex,
      scrollToColumn,
      scrollToRow,
    } = this.props;

    if (
      columnIndex === scrollToColumn &&
      rowIndex === scrollToRow
    ) {
      this._ref.focus();
    }
  }

  _setRef = ref => {
    this._ref = ref;
  };
}

当行启用了 tabIndex 或 contentEditable 时，使用箭头键步进器滚动是否有任何问题？

Are there any issues using Arrow Key Stepper to scroll when the rows have tabIndex or contentEditable enabled?

contenteditable

keyboard-events

tabindex

vertical-scrolling

react-virtualized