使用MUI DataGrid，在行编辑模式下，跨单元格的选项卡导航不与' renderCell '一起工作

Question

---

在列的定义中使用renderEditCell时，一旦行处于编辑模式，我将面临以下两个问题:

1. 没有单元格获得焦点
2. 在单元格上使用tab键不起作用:它应该移动到下一个单元格

如果我注释掉renderEditCell属性，第一个问题仍然存在(但我认为我可以忍受它)，而第二个问题得到解决。

我的问题是我需要呈现一个自定义组件来允许编辑长文本。

我已经在这个沙箱中重现了这个问题。

到目前为止，除了谷歌(没有结果)，我还尝试了什么:

• 使用useGridApiContext和apiRef.current.setEditCellValue。
• 强制tabIndex道具;只是后来，我认为我不应该触摸它，因为字段已经在一个包装器元素与tabIndex无论如何。
阅读文档的次数太多。当涉及到"编辑"时，"可访问性"页面不会提供详细信息。模式。

Answer 1

https://github.com/mui/mui-x/issues/9406

当hasFocus为true时，自定义编辑组件必须手动聚焦输入。这解决了第二个问题。

const LongTextCellEdit: FC<LongTextCellEditProps> = ({
params,
textFieldProps
}) => {
const apiRef = useGridApiContext();
const { id, value: valueProp, field, error } = params;
const [value, setValue] = React.useState(valueProp);
const reference = React.useRef();
useEffect(() => {
setValue(valueProp);
}, [valueProp]);
useEffect(() => {
if (params.hasFocus) {
reference.current!.focus();
}
}, [params.hasFocus]);
const handleValueChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
const newValue = event.target.value; // The new value entered by the user
apiRef.current.setEditCellValue({
id,
field,
value: newValue,
debounceMs: 200
});
setValue(newValue);
};
return (
<Stack direction="column" width="100%" alignSelf="flex-start">
<TextareaAutosize
ref={reference}
minRows={1}
maxRows={10}
{...textFieldProps}
style={{ width: "100%" }}
value={value}
onChange={handleValueChange}
/>
{!!error && <Alert color="error">{error}</Alert>}
</Stack>
);
};