Avoid executing first button on the page with form when entering in a numeric textbox

[Kristof]

Hi,

We have a form page with a kendo-numerictextbox.
Our form is wrapped in a base page that contains some buttons on the top. (so that each form has the same buttons on top)
The buttons are included on the page within the <form> tag.

In case we enter a new value in the numeric textbox and pressing ENTER, the click()-event for the first kendo-button on the top is fired.

- How can we avoid the click() event of that first kendo-button?

- In case the enter is allowed and I want to execute click() of another button (2nd or 3rd). How to achieve that one?

Thanks in advance

 

[Slavena]

Hello Kristof,

Thank you for the details.

This behavior is a standard HTML form behavior. Pressing enter in a focused text input (in this case the NumericTextBox) inside a form will click the first submit button in the form. One way to avoid this is to not have any submit buttons by explicitly setting their type="button":

<button kendoButton type="button">

This Stackblitz example demonstrates the approach above.

Another workaround is to listen for the keydown event of the input field, prevent its default behavior and trigger the click event on the preferred button:

https://stackblitz.com/edit/angular-ewpnsc?file=app/app.component.ts

I hope this helps.

Regards,
Slavena
Progress Telerik