Utilizing both kendo listview and grid components to display the same information in different views; a primary listview of cards and a table-based grid view, both integrated with the Kendo Sortable widget. The objective is to enable users to edit an inline element within the grid view - clicking on a span element displaying the current value should hide it and reveal an input field in its place. This feature functions correctly within the card listview. However, when the input field type is specified as number (determined by the 'data-value-id' attribute), issues arise. One click on the default arrows associated with the number input field causes the field to lose focus prematurely. Clicking outside the input field does not rectify this issue, requiring the user to click back into the input field to regain focus. Only then can pressing the enter key or clicking away from the input field successfully deactivate it.
<span class="single-value">
<input data-bind='value: e.data.Value, visible: Editing, attr: { data-value-id: e.data.ID, type: ValueType }, events: { blur: saveInput, keyDown: valueKeydownHandler }' /></span>
<span class="data-value-editable" data-bind='click:editSingleValue, invisible: Editing, css: { data-value-editable: Editable }'>
<span data-bind='text: e.data.Value'></span>
</span>
Both components share the same input dataSource. I have discovered that the 'data-value-id' attribute must be distinct for each component, but aside from that requirement, they are identical. Why do the increment/decrement arrows on the input field work properly in the list view but not in the grid view when using Kendo? It seems there were previous issues with the Kendo Sortable component preventing input fields from losing focus, which I resolved by destroying the component. However, this caused problems with the grid view since it was not initially initialized with the Kendo Sortable component and would throw undefined errors on attempting to destroy it. To overcome this, I initialized the grid with Sort, yet now the arrows cause the input field to lose focus. Prior to this modification, I encountered the opposite problem in the list view, where the Sortable functionality prevented the input field from losing focus.