在摩纳哥编辑器中无法在DetailsList中导航

问题描述

您好，我正在使用DetailsList，并且希望能够使用Tab在列之间移动选择。 但是我在Github上遇到了这个问题： https://github.com/microsoft/fluentui/issues/4690

需要使用箭头键在列表中导航，但是不幸的是，我在列表中使用了Monaco Editor，并且箭头键在编辑器中被阻止...

我想知道是否可以通过禁用列表将TabIndex设置为-1

或

如果光标在文本末尾（如文本框），摩纳哥可以释放箭头键。

解决方法

我遵循以下基本原理进行工作：

1. 在摩纳哥编辑器上收听onKeydown事件
2. 标识插入符的position
3. 了解total of lines
4. 获取specific line的字符串
5. move来自摩纳哥编辑的焦点

了解这些内容后，您可以检查插入符号是否位于最后一行的末尾，并在用户按向右箭头键时移动焦点。我还添加了代码，以检查插入标记是否在开始时，并将焦点移到左侧的单元格。

这是我最终得到的代码

import * as React from "react";
import "./styles.css";
import { DetailsList,IColumn } from "@fluentui/react";
import MonacoEditor from "react-monaco-editor";

export default function App() {
  const columns: IColumn[] = [
    {
      key: "name",minWidth: 50,maxWidth: 50,name: "Name",onRender: (item,index) => (
        <input id={`name-row-${index}`} value={item.name} />
      )
    },{
      key: "type",minWidth: 200,name: "Type",index) => {
        return (
          <MonacoEditor
            editorDidMount={(editor,monaco) => {
              editor.onKeyDown((event) => {
                if (event.code === "ArrowRight") {
                  const { column,lineNumber } = editor.getPosition();
                  const model = editor.getModel();
                  if (lineNumber === model?.getLineCount()) {
                    const lastString = model?.getLineContent(lineNumber);
                    if (column > lastString?.length) {
                      const nextInput = document.getElementById(
                        `default-value-row-${index}`
                      );
                      (nextInput as HTMLInputElement).focus();
                    }
                  }
                }
                if (event.code === "ArrowLeft") {
                  const { column,lineNumber } = editor.getPosition();
                  if (lineNumber === 1 && column === 1) {
                    const previousInput = document.getElementById(
                      `name-row-${index}`
                    );
                    (previousInput as HTMLInputElement).focus();
                  }
                }
              });
            }}
            value={item.type}
          />
        );
      }
    },{
      key: "defaultValue",minWidth: 100,name: "Default Value",index) => (
        <input id={`default-value-row-${index}`} value={item.defaultValue} />
      )
    }
  ];

  const items = [{ name: "name",type: "type",defaultValue: "name" }];

  return <DetailsList columns={columns} items={items} />;
}

您可以在此代码框https://codesandbox.io/s/wild-smoke-vy61m?file=/src/App.tsx中看到它的工作

monaco编辑器似乎很复杂，可能必须改进此代码才能支持其他交互（例如：折叠代码后，我不知道这是否有效）