Material UI Autocomplete+TextField表格单元格编辑失效问题

双击DataGrid单元格进入编辑状态后，点击Autocomplete的TextField就退出编辑，核心原因是DataGrid的编辑状态检测逻辑认为点击了编辑区域外部，导致自动退出编辑模式。虽然仍能选择选项，说明Autocomplete本身功能正常，但输入框的焦点事件没有被DataGrid正确识别为编辑区域内的操作。

针对这个问题，我们可以通过以下两点修改来修复：

1. 确保输入框自动获取焦点并维持编辑状态：在TextField上添加autoFocus，同时在输入框获得焦点时，显式通知DataGrid保持当前单元格的编辑模式。
2. 正确传递DataGrid编辑单元格的上下文参数：确保Autocomplete和TextField能正确响应DataGrid的编辑事件，避免触发不必要的失焦退出。

修改后的代码如下：

const SelectEditInputCell = (props: GridRenderCellParams) => {
  const handleInputFocus = () => {
    // 显式设置单元格为编辑模式，防止点击输入框时退出
    props.api.setCellMode(props.id, props.field, 'edit');
  };

  return (
    <Autocomplete
      getOptionLabel={(option: FactionCar) => option.name}
      filterOptions={(x) => x}
      options={cars}
      autoComplete
      includeInputInList
      className={styled.AssetList}
      filterSelectedOptions
      loading={areCarsFetching}
      noOptionsText={'No options'}
      onInputChange={(event, value) => fetchCars(value)}
      sx={{ width: '100%', overflow: 'auto', maxHeight: 58 }}
      multiple
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          autoFocus // 自动获取焦点，确保进入编辑状态后输入框激活
          onFocus={handleInputFocus} // 焦点触发时维持编辑模式
        />
      )}
    />
  );
};

额外排查点：

• 检查styled.AssetList是否设置了pointer-events: none这类会导致焦点丢失的CSS属性
• 确认DataGrid的editMode为默认的cell模式（若改为row模式会有不同的编辑行为逻辑）

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