Treeview with text box loses focus on mouseup in AngularJS Directive

[Colin]

The scenario is:

1. Use angular js
2. Create a treeview with a template
3. In the template place an  textbox (input type="text")

If the treeview is in open code, everything works as expected, i.e. if you click in the text you can start typing

If the treeview is in an angular directive, as soon as you release the mouse button, the textbox loses focus. If you click in the textbox, and then move the mouse out of the textbox before releasing the button, the textbox retains focus and you can type into it.

This behaviour is only occurring in Chrome; IE and Firefox work correctly.
This may be related to an older issue,  http://www.telerik.com/forums/controls-in-template-for-treeview-loose-focus-on-mouse-up

You can see the issue in http://dojo.telerik.com/UyOVu, or in the attached file

[Alex Gyoshev]

Hello Colin,

Thank you for reporting this. I have logged this for investigation. At the time being, if you need editing of node items, use a standalone form rather than rendering inputs in TreeView items. See this Dojo snippet for a demo.

Regards,
Alex Gyoshev
Telerik

 

 

[Colin]

Hi Alex

Thanks for that. However, our UI is more complex that the sample I sent, and we do need to be able to do inline editing in the node. 

Are there any results from you investigation so far? Should I submit a support ticket?

Regards

Colin

[Alex Gyoshev]

Hello Colin,

We have found the root of the problem. jQuery considers the input unfocusable because of the custom element (bf-tree-edit), thus we focus the TreeView element to enable keyboard navigation. You can resolve this by specifying the display property of the custom element, like shown in this Dojo snippet.

Regards,
Alex Gyoshev
Telerik

 

 

[Colin]

Hi Alex

Thanks for that, when I add the display property it works as expected. Note that your dojo example actually does not display anything, It looks like there is another error there.

Regards

Colin