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

Question

您好，我正在使用 DetailsList，我希望能够使用制表符将我的选择从一列移动到另一列。但是我在 Github 上遇到了这个问题： https://github.com/microsoft/fluentui/issues/4690

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

我想知道是否有办法禁用列表以将 TabIndex 设置为 -1

或

如果 Monaco 可以在光标位于文本末尾（类似于文本框）时释放箭头键。

Answer 1

我按照这个原理做了一些工作：

在摩纳哥编辑器上收听 onKeydown 活动
识别插入符号[=12=]
知道total of lines
获取
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",
      onRender: (item, 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",
      onRender: (item, index) => (
        <input id={`default-value-row-${index}`} value={item.defaultValue} />
      )
    }
  ];

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

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

你可以看到它在这个codesandbox中工作https://codesandbox.io/s/wild-smoke-vy61m?file=/src/App.tsx

monaco-editor 似乎很复杂，可能您必须改进此代码以支持其他交互（例如：我不知道折叠代码时这是否有效）

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

Navigation in DetailsList not possible with Monaco editor

reactjs

office-ui-fabric

monaco-editor

fluent-ui