Can't disable toolbar navigation (is a bug?)

0 Answers 16 Views
TextBox ToolBar
n/a
Top achievements
Rank 1
n/a asked on 14 Mar 2024, 09:09 AM

I have a custom control type in a toolbar container (a simple input text box); inside the input box the arrow keys do not work.
Upon investigation I discovered that the problem is related to toolbar navigation (it adds a listener to the keydown event and overrides the arrow keys), so is there a method to avoid this? I though there was a property like navigable to enable or disable this feature.

I found a workaround, but it's almost a hack because it accesses private variables:
inside aferviewInit of toolbar's the parent i call 😱

toolbar["toolbarKeydownListener"]()

to remove the  listener, it works until you change the listener name.
i did an example 
https://stackblitz.com/edit/angular-ubjvvg?file=src%2Fapp%2Fcustom-tool.component.ts,src%2Fapp%2Fapp.component.ts

Greetings

 

Georgi
Telerik team
commented on 19 Mar 2024, 07:39 AM

Hello Nunzio,

Thank you very much for the details provided.

Indeed, this behavior of the Kendo UI for Angular Toolbar has been previously reported to our team and is related to the specificity of the component when custom controls are rendered inside it.

Generally speaking, when the custom element that is being rendered inside the Toolbar contains an Input and/or has its own internal keyboard navigation which has to kick in when focused, the element/component needs to be wrapped in an element that will be part of the built-in Toolbar navigation. For more detailed information, please refer to the following issue:

https://github.com/telerik/kendo-angular/issues/4001

Please, keep in mind that the issue is related to the toolbar of the Grid but the Grid internally utilizes the built-in Toolbar component.

For your convenience, I am sending you a StackBlitz demo which demonstrates a possible approach for enabling the default behavior of the arrow keys inside the input element (the Kendo UI for Angular TextBox):

https://stackblitz.com/edit/angular-ubjvvg-hffkev

For further reference about adding a keyboard navigation to custom elements inside the Toolbar, I would suggest checking out the following article:

https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/#toc-adding-keyboard-navigation

I hope the provided information sheds some light on the matter. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

 

No answers yet. Maybe you can help?

Tags
TextBox ToolBar
Asked by
n/a
Top achievements
Rank 1
Share this question
or