Prevent Arrow Keys from Changing NumericTextBox Value
Environment
| Product | Kendo UI for Vue NumericTextBox |
| Version | 8.0.2 |
Description
I want to prevent the ArrowUp and ArrowDown keys from increasing or decreasing the value in the Kendo UI for Vue NumericTextBox. Using stopPropagation in a key-down capture handler blocks the event from reaching a parent @keydown handler (for example, on a wrapping <td>), which is not desirable.
Solution
Intercept the arrow key and mouse wheel events in the capture phase using a wrapper element around the NumericTextBox. Call preventDefault() and stopPropagation() to prevent the component from processing the arrow key or wheel increment/decrement. To ensure the parent @keydown handler still fires, re-dispatch the keyboard event on the parent element.
This approach stops the value change at its source — before the NumericTextBox's internal handler runs — which avoids visual glitches from internal state updates.