Hi,
I'm currently evaluating the use of Kendo React Grid for a project where one of the requirements is the use of a grid. I've been looking at the Kendo Grid documentation for editing and I'm noticing a difference in behaviour from the example on the Kendo site vs on Stackblitz and I'm trying to understand which is the correct behaviour.
Comparing the example on this page https://www.telerik.com/kendo-react-ui/components/grid/editing/
And the example on this page https://stackblitz.com/run/?file=app%2Fmain.jsx which is accessed from the "Open in Stackblitz" link on the above page
When clicking to edit an item in either it opens up the row for editing as expected but as soon as you start to edit data in the middle of a value in the Name column, the cursor behaves differently across the 2 examples. On the Telerik page the cursor jumps to the end of the word after every change of the text whereas on the Stackblitz page, the cursor stays in place as the user enters multiple characters.
I've compared the 2 files and they look identical, I've also tried using this within an application myself and I get the same behaviour as on the Telerik site. How do I get the same behaviour as the Stackblitz example?
2 Answers, 1 is accepted
Thank you for bringing this to our attention.
The behavior observed in StackBlitz is the expected one. We have noticed that we have code in our site that also listen on keydown and "steals" the focus, causing the described behavior.
I can assume that something similar is happening on the real application as well. Please check the code again to see if there is something that listen on key down and is making some changes regarding the focused element.
If sending an example is possible, I will be happy to look at it as well.
Regards,
Stefan
Progress Telerik
Rank 1
To close the loop on this, I'm currently working to consume the library from within a Fable frontend written in F# instead of JavaScript or TypeScript. I was experiencing the same behaviour as the example on the Kendo site and I've raised an issue on the Fable React project (https://github.com/fable-compiler/fable-react/issues/172). It appears that this was caused by the underlying dispatcher in an Elmish application. I now have the same (correct) behaviour as the StackBlitz example.
Thank you for clarifying what the expected behaviour should be Stefan