Material UI Data Grid内嵌Input无法输入空格及前后退键失效求助

问题根源 #

Material UI Data Grid会默认拦截空格、退格、删除键等键盘事件，用于表格自身的导航或操作逻辑，导致内嵌的Input组件无法正常响应这些按键输入。

修复方案 #

1. 阻止事件冒泡，避免表格拦截按键 #

在Input组件中添加onKeyDown事件处理，阻止目标按键的事件冒泡到Data Grid：

<Input
  value={value}
  onChange={(e) => handleChange(e.target.value)}
  onKeyDown={(e) => {
    const blockedKeys = [' ', 'Backspace', 'Delete'];
    if (blockedKeys.includes(e.key)) {
      e.stopPropagation();
    }
  }}
/>

2. 确保输入值与单元格状态同步 #

如果使用Data Grid的编辑模式，需保证Input的输入值正确同步到单元格的编辑状态或数据源：

// 列定义示例
const columns: GridColDef[] = [
  {
    field: 'customInput',
    headerName: '自定义输入',
    editable: true,
    renderCell: (params) => (
      <Input
        value={params.value}
        onChange={(e) => {
          // 实时更新单元格编辑值
          params.api.setEditCellValue(params.id, params.field, e.target.value);
        }}
        onKeyDown={(e) => {
          if ([' ', 'Backspace', 'Delete'].includes(e.key)) {
            e.stopPropagation();
          }
        }}
      />
    ),
  },
];

// 提交编辑时更新数据源
const handleEditCommit = (params: GridCellEditCommitParams) => {
  const updatedRows = rows.map(row => 
    row.id === params.id ? {...row, [params.field]: params.value} : row
  );
  setRows(updatedRows);
};

3. 可选：调整表格键盘导航设置 #

如果局部阻止冒泡无效，可以尝试禁用表格的部分键盘导航（不建议全局禁用，避免影响表格原有交互）：

<DataGrid
  rows={rows}
  columns={columns}
  disableKeyboardNavigation={false} // 按需设置为true，仅在必要时使用
  onCellEditCommit={handleEditCommit}
/>

注意事项 #

• 优先使用阻止事件冒泡的方案，最小化对表格原有功能的影响。
• 务必保证Input的输入值与Data Grid的单元格状态或数据源双向同步，避免输入内容丢失。

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