This is a migrated thread and some comments may be shown as answers.

Pasted value is absent after navigation on kendo-sortable

3 Answers 123 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Denis
Top achievements
Rank 1
Denis asked on 26 Oct 2017, 12:03 PM

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!

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 30 Oct 2017, 11:37 AM
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.
0
Denis
Top achievements
Rank 1
answered on 31 Oct 2017, 11:59 AM

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

 

 

0
Angel Petrov
Telerik team
answered on 02 Nov 2017, 01:04 PM
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.
Tags
Sortable
Asked by
Denis
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Denis
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or