在列的定义中使用renderEditCell
时,一旦行处于编辑模式,我将面临以下两个问题:
- 没有单元格获得焦点
- 在单元格上使用tab键不起作用:它应该移动到下一个单元格
如果我注释掉renderEditCell
属性,第一个问题仍然存在(但我认为我可以忍受它),而第二个问题得到解决。
我的问题是我需要呈现一个自定义组件来允许编辑长文本。
我已经在这个沙箱中重现了这个问题。
到目前为止,除了谷歌(没有结果),我还尝试了什么:
- 使用
useGridApiContext
和apiRef.current.setEditCellValue
。 - 强制
tabIndex
道具;只是后来,我认为我不应该触摸它,因为字段已经在一个包装器元素与tabIndex
无论如何。 阅读文档的次数太多。当涉及到"编辑"时,"可访问性"页面不会提供详细信息。模式。
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>
);
};