[Solved] [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?

[Filip]

Hello, Adrian,

This behavior occurs because typing in the external input updates React state, which naturally causes the parent component and the Grid to re-render on each keystroke. When the Grid is in inline edit mode, parts of the editing UI are recreated during these re-renders, and as part of React’s normal reconciliation process the Grid restores focus to the currently edited row. When only a single row is being edited, React can consistently return focus to that one editable element, which makes it appear as if focus is being taken from the external input. When multiple rows are in edit mode, there is no single clear edit target, so this focus restoration does not occur in the same way. Because of this, the behavior is not a bug in the Grid itself, but rather an expected outcome of how React manages re-rendering and focus during state updates.

Please let me know in case further questions arise and I will gladly assist.

Regards,
Filip

[Adrian]

Sorry but I disagree that this is not a bug. There is not a single input in the single row - there are 3. When you have 2 rows then there are 6 inputs. Number of editable rows shouldn't change the behavior. For React there is no such a construct as a row in a table so it can't distinguish if it should focus on a field in a grid or not depending on number of rows with inputs. Still, I do not understand why your grid behaves differently. Looks like something which we should be able to control. 

[Filip]

Hi, Adrian, 

I discussed the case with one of the developers responsible for the implementation of the Grid component and it seems that this behavior is indeed a bug. I have logged it as such in our public repo where it's progress can be tracked and monitored:

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

Please accept my apologies for any inconvenience this might have caused you. For bringing this issue to our attention I have granted you some Telerik points. I can recommend subscribing to the item as when any progress has been made or a fix is released we will update the issue.

Regards,
Filip

[Adrian]

Thank you! I will.