Treeview with text box loses focus on mouseup in AngularJS Directive

5 posts, 1 answers
  1. Colin
    Colin  avatar
    18 posts
    Member since:
    Aug 2014

    Posted 14 Nov 2014 Link to this post

    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

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Colin
    Colin  avatar
    18 posts
    Member since:
    Aug 2014

    Posted 26 Nov 2014 in reply to Alex Gyoshev Link to this post

    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
  5. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 27 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Colin
    Colin  avatar
    18 posts
    Member since:
    Aug 2014

    Posted 27 Nov 2014 in reply to Alex Gyoshev Link to this post

    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 
Back to Top
Kendo UI is VS 2017 Ready