Pasted value is absent after navigation on kendo-sortable

4 posts, 0 answers
  1. Denis
    Denis avatar
    6 posts
    Member since:
    Feb 2014

    Posted 26 Oct Link to this post

    Hi!

    First of all, here is the dojo to reproduce. Also I've attached gif file which shows all cases described below. 

    Let me describe this dojo more detailed. Here we have 'Main' link, which is outside kendo-sortable element, and two links: 'Link 1', 'Link 2' - which are placed inside kendo-sortable element. There is ng-view section right next to them. All templates contain only text and made just for navigation, except of 'Link 2', because it contains kendo-combo-box element also. 

    Case 1

    1. Open 'Link 2' and paste (don't type!) some value into combo box. Left this field on focus.
    2. Navigate to 'Main' page. And go back to 'Link 2' page.
    3. You can see, that pasted value is shown in combo box.

      So, everything works fine.

    Case 2:

    1. Open 'Link 2' and paste (don't type!) some value into combo box. Left this field on focus.
    2. Navigate to 'Link 1' page. And go back to 'Link 2' page.
    3. Pasted value is absent.

      Here we have a problem.

    Case 3: 

    1. Open 'Link 2' and paste (don't type!) some value into combo box. 
    2. Click somewhere on this page to remove focus from combo box element.
    3. Navigate to 'Link 1' page. And go back to 'Link 2' page.
    4. You can see, that pasted value is shown in combo box.

      Everything works fine.

    I have some notes:

    1. The problem occurs only with kendo elements. It not happens with simple input element.
    2. The problem occurs only if navigation link placed inside kendo-sortable or kendo-draggable element.

    I understand that this is not a regular case, but we have this in our application. So it would be great, if you could fix that. Or even provide temporary fix for us.

    Thank you!

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 30 Oct Link to this post

    Hi, Denis,

    Thank you very much for the provided explanations.

    The described behaviour is expected because the value of the input is updated on blur. In the second case, when the blur occurs, the Kendo UI ComboBox is gone, therefore, it cannot trigger its change event.

    I had a look through the AngularJS router API and it seems to me that their $locationChageStart event is suitable to programmatically blur the input of the Kendo UI ComboBox before the route has changed:

    $scope.$on("$locationChangeStart", function(ev, nextUrl){
      $scope.combo.input.blur();     
    });

    To be able to reference the widget as I have, add a name to it in the template:

    <input kendo-combo-box="combo"/>
     
    Here is the updated Dojo:

    http://dojo.telerik.com/@bubblemaster/IgANOn

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Denis
    Denis avatar
    6 posts
    Member since:
    Feb 2014

    Posted 31 Oct in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    Thank you very much for your fix. But I think that it would be great, if you could fix it.

    Because everything works fine, if links are placed outside kendo-sortable or kendo-draggable. So the problem is related not so much to routing but to kendo elements. As I think, it should have the same behavior for all cases and element should lost its focus in both cases, not only in case if link is placed outside kendo-sortable / draggable.

    Best regards,

    Denis

     

     

  4. Angel Petrov
    Admin
    Angel Petrov avatar
    1044 posts

    Posted 02 Nov Link to this post

    Hi,

    Now the problem proves more complex as it is due to the integration of controls. When a draggable component is attached over the div holdling the buttons we subscribe to mousedown and touchstart events and prevent the default action according to some criterias. If we integrate a fix in regards of the problematic scenario we will break the draggable functionality which is not desirable. Considering the aforementioned I recommend integrating the fix which my colleague has provided.

    Regards,
    Angel Petrov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top