Using MUI DataGrid, tab navigation across cells does not work with `renderCell` When in row edit mode

Question

---

When using renderEditCell in a column's definition, once the row is in edit mode, I face these two issues:

1. None of the cells gets the focus
2. Using the tab key on that cell has no effect: it should move to the next cell

If I comment out the renderEditCell property, the first issue remains (but I think I can live with it), while the second issue is resolved.

My problem is that I need to render a custom component to allow editing long texts.

I've reproduced the issue in this sandbox.

What I've tried so far in addition to googling (with no results):

• Using the useGridApiContext and apiRef.current.setEditCellValue.
• Forcing the tabIndex prop; only later, I figured I should not touch it because the field is already in a wrapper element with a tabIndex anyway.
• Reading the docs too many times. The Accessibility page does not go in details when it comes to the "edit" mode.

Answer 1

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

The custom edit component must focus the input manually when hasFocus is true. This fixes your second issue.

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