[Grid][Bug] Updating selection state prevents edit mode

[vveesseelliinnaa]

Description

Updating selection state prevents entering in Edit mode in the selected dataItem.

Plan

KendoReact Free

Steps To Reproduce

1. Go to https://stackblitz.com/edit/vitejs-vite-zfsrvaet?file=src%2FNewGrid.tsx
2. Click a row of the Grid to select it
3. Double click a row to edit it Result - the Grid does not enter in edit mode

Second sample:

1. Go to https://stackblitz.com/edit/react-uvm2uisa?file=app%2Fapp.tsx
2. Click the Edit button

Result the row does not enter in edit mode

Screenshots or video

No response

Actual Behavior

The Grid does not enter edit mode unless you comment the onSelectionChange logic

        onSelectionChange={(event) => {
          const newSelectedState = event.select;
          //setNewSelection(newSelectedState);
        }}

Expected Behavior

The Grid should be able to enter in edit mode even if the selection is enabled as can be seen in the old Grid API here: https://stackblitz.com/edit/vitejs-vite-aajvsd85?file=src%2FNewGrid.tsx

Browser

Chrome

Browser version

latest

OS type

MacOS

OS version

No response

Last working version of the KendoReact package (if regression).

10.2

[vveesseelliinnaa]

Reported again in Ticket ID: 1690436

[ivanchev]

setSelect changes a state variable, and thus triggers a refresh of the component, and a new render cycle. Therefore the MyEditCommandCell component is re-created, and a new instance is passed to the grid, so click following the selection is lost.

In order to properly use custom components, they need to be defined outside of the current component that manages the grid and its lifecycle, or have them be defined within React.useCallback.

Here are the updated examples from the issue, using correct useCallback wrappers of the components and the methods they use, and they are working as expected: https://stackblitz.com/edit/vitejs-vite-e7pm3mdf?file=src%2FNewGrid.tsx https://stackblitz.com/edit/react-uvm2uisa-7u63mr1r?file=app%2Fapp.tsx

Since this is a side effect of how react treats components and their lifecycle, it's not a bug on our end, but rather a wrong usage. We will make sure to update our documentation though, to make sure we specify these requirements about using custom components more clearly, and fix any demos that might show the wrong usage.