Material React Table自定义输入框编辑后无法自动退出编辑状态

问题现象 #

在Material React Table中使用自定义输入组件（如@mui/x-date-pickers/DatePicker、@mui/material/TextField）编辑单元格后，点击页面外部区域时，输入框不会自动隐藏变回文本显示状态，只有编辑其他字段或点击表格行列时才会恢复。

解决方案 #

方法1：用ClickAwayListener监听外部点击 #

给自定义编辑组件套上MUI的ClickAwayListener，点击外部时触发关闭编辑状态的操作：

import { ClickAwayListener } from '@mui/material';

const Edit = ({ column, row, table }: any) => {
  // 点击外部时关闭编辑单元格
  const handleClickAway = () => {
    table.setEditingCell(null);
  };

  const onAccept = (event: any) => {
    const isoDate = dayjs.utc(event).toISOString();
    // 用MRT内置的updateRow更新数据，避免直接操作内部缓存
    table.updateRow(row.id, { [column.id]: isoDate });
    // 确认选择后关闭编辑状态
    table.setEditingCell(null);
  };

  return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <DatePickerField 
        value={dayjs(row.original.hireDate)} 
        name="hire-date" 
        onAccept={onAccept} 
      />
    </ClickAwayListener>
  );
};

方法2：修正单元格点击逻辑 #

当前muiTableBodyCellProps里的onClick直接强制设置编辑单元格，干扰了默认的状态管理，可改成点击单元格时切换编辑状态：

muiTableBodyCellProps: ({ cell, column, table }) => ({
  onClick: () => {
    const currentEditingCell = table.getEditingCell();
    // 当前单元格未编辑则开启，已编辑则关闭
    if (currentEditingCell?.id !== cell.id) {
      table.setEditingCell(cell);
    } else {
      table.setEditingCell(null);
    }
  },
}),

关于API调用逻辑的放置问题 #

muiTableBodyCellProps不适合放置修改数据后的API调用逻辑：

• 这个属性仅用于配置单元格的UI样式、基础交互事件（如点击、失焦），属于纯UI层配置，不应混入业务逻辑。
• API调用属于数据更新的业务逻辑，应该放在MRT专门提供的回调钩子（如onRowUpdate、onCellUpdate）里，或者自定义组件的确认操作函数（比如上面的onAccept）中。

示例：在onRowUpdate中处理API调用

const table = useMaterialReactTable({
  // 其他配置项...
  onRowUpdate: async ({ row, newRow }) => {
    // 调用后端API更新数据
    await fetch(`/api/your-endpoint/${row.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newRow),
    });
    // 更新本地数据源
    setData(prevData => prevData.map(r => r.id === row.id ? newRow : r));
  },
});

内容的提问来源于stack exchange，提问作者pope_maverick