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

Question

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

即使使用 PgUp/PgDn、Home/End、Space 和 Shift-Space 也能很好地工作。但是，当我们向行添加 tabIndex 和/或 contenteditable 属性(键盘事件需要)时，当焦点行滚动到 View 之外并从 DOM 中移除时，滚动会卡住。我们可以使用 Tab 键和/或鼠标重新获得控制权。

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

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

感谢任何建议/意见。

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 呈现的外部容器有一个制表符索引，以便可聚焦。 ArrowKeyStepper 就是这样监听键盘事件的。

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

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;
  };
}