[Grid] Inline editing - strange re-focus when single line is being edited

[Adrian]

We have a strange issue with the newest Grid component. I have this issue recreated here: https://codesandbox.io/p/devbox/proud-forest-v49cp6

The upper most input element is just to trigger state change. To see the issue:

1. Click on Edit in any row in the grid to start inline editing of that row
2. Start typing in the upper most input field (above the grid) 
3. After each letter the Grid will get focus preventing me from writing in the input!!!

Now if I enable editing in two rows at once (two rows are in edit state) this behavior is absent and I can normally type in my input above the grid. What is wrong?

 

[Filip]

Hi, Adrian,

Thank you for the provided runnable example, I examined it and was able to reproduce the undesired re-focusing behavior.

It seems to be due to the Grid being re-rendered on every keystroke in the external input. I was able to resolve the issue by preventing unnecessary Grid re-renders while typing in the external input (for example, by separating the input and the Grid into different components and memoizing the Grid). Once the Grid is no longer re-rendered on each keystroke, the focus remains correctly in the external input. You can examine the updated example here:

• https://codesandbox.io/p/devbox/hopeful-fermat-p6xyzj?workspaceId=ws_SJefxLfb3wg63G5PEuZirH

Please give this approach a try and let me know in case further questions arise.

Regards,
Filip
Progress Telerik

[Adrian]

Thank you. We have done exactly the same workaround already but it is as it is - just a work around. I suppose this is a bug in the grid (especially that it occurs only for a single row). Will you be fixing it in the next versions? Do you know why it is working like this?