[Solved] React DataGrid space key doesn't work in filter fields or edit fields when row selection enabled

[Michael]

I'm using the React DataGrid (version 9.4.1).  The grid includes filtering at the top and a few fields in each row that are optionally editable.  The grid also has row selection configured and working.  When row selection is enabled, I'm no longer able to type a space in the filter fields or in any editable row field.  It appears the space key is being captured to handle row selection.  As soon as selectable is disabled

selectable={{ enabled: false }}

then the space bar works as expected when typing in a filter field or editable field in a row.  Is there any way to opt out of using the space bar for row selection?  Is there any configuration that can address this conflict?

 

To see this problem in action visit this doc page: https://www.telerik.com/kendo-react-ui/components/grid/selection/row-selection

Select the "Edit In" StackBlitz option for the demo grid.   Open the app.tsx file and add this property to the grid: filterable={true}.  Then save the change which should render the grid with a filter field above the Product Name column.  Try typing text in the product name filter with a space and notice this is not possible.  The same applies if the row has an editable field that accepts text.  

 

[Stoyan]

Hi Michael,

Thanks for the provided thorough information and code snippets.

I've tested it out and can confirm that this behavior shouldn't occur. Thank you for pointing it out. It's indeed on our end. I've created an issue in our public GitHub repository, which can be found here:

https://github.com/telerik/kendo-react/issues/2929

Please subscribe to it and follow for any future updates to it.