Space Navigation

[12xghostking]

Describe the bug - I am using a AutoComplete Render Cell in my datagrid column.(City) .When i want to enter a city like for example New York , as soon as i press the space key after new the datagrid gets scrolled and my data is lost that i entered this is causing me unable to enter any city with a space in its name.
My Code-
const debounceSearch = debounce((event, newValue) => {
if (newValue !== "") {
const filteredCities = allCities.filter((e) => e.name.toLowerCase().includes(newValue.toLowerCase()));

  setCityOptions(filteredCities); // Update the Autocomplete options
}

}, 300);

// Debounce function implementation (you can use lodash or similar library)
function debounce(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
const later = function () {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}

{
{
field: 'StudentCity',
headerName: 'Student City',
width: 150,
editable:false,
renderCell: (params) => {
// const selectedCountry = params.row.StudentCountry;

    // const selectedOption = selectedCountryData?selectedCountryData.find((option) => option.name === params.row.StudentCity):null;
    if (rowModesModel[params.id]?.mode !== "edit") return params.row.StudentCity
    return (

      <Autocomplete
        size="small"
        sx={{
          borderRadius: { md: "8px", xs: "4px" },
          fontSize: { md: "16px", xs: "12px" },
          "& .MuiInputBase-input": {
            padding: " 0 !important",
            minWidth: "50px !important",
            fontSize: { xs: 10 }

          },
        }}
        getOptionLabel={(option) => (option.name ? `${option.name},${option.stateCode},${option.countryCode}` : "")}
        // value={params.row.StudentCity}
        onChange={(event, value) => handleCityChange(event, value, params)}
        style={{ width: 200 }}
        slotProps={{ paper: { sx: { fontSize: { xs: 12 } } } }}
        disablePortal
        id="combo-box-demo"
        options={cityOptions}
        onInputChange={debounceSearch}
        renderInput={(params, key) => (
          <TextField
            key={key}
            variant="standard"
            {...params}
            InputProps={{ ...params.InputProps, disableUnderline: true }}

            inputProps={{

              ...params.inputProps,
              // autoComplete: 'new-password',
            }}
          // Set the value of the input to the selected option label

          />
        )}
      />
    );
  },
}
}

Expected behavior- I want to enter my city and when i am in autocomplete to disable navigation of the data grid.

Environment

• react-data-grid version: "^7.0.0-beta.41"
• react/react-dom version: "^18.2.0"