KEndoGrid: After toolbar filter/search state update, an in-cell editor (NumericTextBox) sometimes auto-focuses

[Grant]

Hi Team, 

We have a KendoReact Grid where (effectively) all rows are in edit mode (we set edit so each valid item is editable). One of the editable columns uses a custom edit cell that renders a NumericTextBox (quantity).

We also have a toolbar with an Input used to search/filter products. The toolbar Input onChange is debounced (lodash debounce), and on each debounced change we update the Grid filter/state.

Problem: when the debounced toolbar Input triggers a state update and the Grid re-processes data and re-renders rows, SOMETIMES one of the quantity NumericTextBox inputs auto-focuses. This steals focus from the search input while the user is still typing. The user then unknowingly continues typing, but now their keystrokes go into a quantity cell instead, causing incorrect quantities / incorrect lines ordered.

This is a serious UX/data integrity issue because users can accidentally edit quantities while they intend to keep typing the product search.

Expected Behaviour
When the user is typing in the toolbar search Input, focus should remain on that Input across Grid state changes (sorting/filtering/paging), and no cell editor should automatically take focus unless the user explicitly clicks into a cell or we explicitly programmatically focus it.

Source
I've tried to duplociate the error using a simplistic kendo example without luck but I've included the LineItemsGrid, LineItemsToolbar and the QuantityEditCell in this stackBlits for ref, see `MyFiles`. Note that this is NOT a working demo. There is just too much going on contextually to make a static working demo.

https://stackblitz.com/edit/react-2bkcpcjg?file=MyFiles%2FQuantityEditCell.tsx,MyFiles%2FLineItemsToolbar.tsx,MyFiles%2FLineItemsGrid.tsx
Any advise or way to tweak out where the bug could be would be helpful.

Thanks,
Grant

[Grant]

Hi Filip, 

Thanks for the links, Im experiencing the same bug that is described in the logged ticket. I've update the example that was provided to simualte my experience, https://stackblitz.com/edit/react-njwriwko-3avopmy1?file=app%2Fapp.tsx.

Steps to replicate:
1. In the search type 'chai', 1 letter a a time,
  - note that nothign happens until the full word is there , then focus shifts
2. backspace one character in the search
  - note the focus shifts to the 'chang' input
3. backspace again
  - note the focus shifts to 'chef anton...'

Search for different combinations and you will see the unpredictable behaviour.

Any assitence in resolving this would be really aprpeciated.

Thanks,
Grant

[Filip]

Hi, Grant,

Thank you for the provided runnable example. It seems that the faced behavior is indeed the same as in the fixed issue and because of that I have reopened it:

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

Apologies for any inconvenience this might have caused you. I tried various workarounds to resolve this undesired behavior, however the only approach that mitigated it (however it's still observable for a brief second) is to restore the focus if the user was typing in the search box:

• https://stackblitz.com/edit/react-njwriwko-igujogwi?file=app%2Fapp.tsx

While I understand that this approach is far for ideal I still hope it can prove useful to some degree for the time being until the bug is fixed.

Regards,
Filip

[Grant]

Thanks Filip, the workaround is appreciated. I'll also monitor the Github bug for progress. -G

[Filip]

Hi, Grant,

Thank you for the provided example.

I tested it on my end to see if I could reproduce the behavior, however I was not able to observe the focus stealing issue. I also attempted to isolate it using simplified Grid setups where all rows are in edit mode and external inputs trigger Grid state changes, however I’m not observing focus being stolen in those scenarios either. I also reviewed the `LineItemsGrid`, `LineItemsToolbar`, and `QuantityEditCell` files to look for anything that could explicitly cause focus to be set or shifted, but I did not find any code that would explain the focus-stealing behavior. In addition we recently fixed an issue that seems quite similar to the current one:

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

however the fix is present in the version used in the Stackblitz example. It appears that this behavior occurs under specific, environment-dependent conditions, which makes it difficult to pinpoint the root cause without an isolated reproducible example. To help narrow this down, could you please test whether setting the Grid’s navigatable prop to false changes the behavior, and let us know if the issue occurs in a specific browser or across multiple browsers? Are there any other components present in the reproducible environment? If possible, a short video recording demonstrating the focus being stolen could also help.

Regards,
Filip
Progress Telerik