Grid inside Angular directives not editable with keyboard shortcut

[Anna]

Hi,

We have problem with Kendo grid + angular directive + keyboard shortcut.

When we put a kendo grid inside any angular directive, the inline editable will require double click to edit. This makes keyboard shortcut, Enter, unable to edit. When use focus on an editable cell, and press enter or single click, the field will appear as editable input box, but not focused, so user must click one more time to start editing. Press enter again, will return to non-editable cell, so user cannot perform edit with keyboard shortcut.

Demo: http://plnkr.co/edit/E7nRyPhggEqw5RpzXSxW?p=preview

 

[Anna]

Sorry, I forgot to say this happens only in Chrome for all type of input box, not editable for text input box in IE sometimes, and works for all in Firefox.

[Atanas Korchev]

Hi,

This seems to be caused by the custom directive. It uses a custom element which for some reason causes this behavior. Changing the directive to this:

.directive('myCustomer', function() {
    return {
      restrict: 'A',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'directive_template.html'
    };
  });

  <div my-customer info="naomi"></div>
  <hr>
  <div my-customer info="igor"></div>

Fixes the problem. Here is a plunker: http://plnkr.co/edit/h7o4KzOKk0KtxP0tv6En?p=preview

We will investigate this issue further and see if we can fix it in the original case.

Regards,
Atanas Korchev
Telerik

 

 

[Anna]

Hello Atanas,

 

Thank you for replying. That's an interesting discovery. We will appreciate it very much if this can be fixed with  restrict: 'E'. We are using the grid inside a few quiet complicated custom directives set to element (restrict: 'E'). It's quiet a hassle to change all them all.

 Best,

 Ama

[Atanas Korchev]

Hello,

We managed to fix the problem. The fix will appear in the latest internal build as well as the upcoming service pack.

Regards,
Atanas Korchev
Telerik

 

 

[Anna]

Great to hear. Thanks!