Igniteui-angular: Cannot read property 'focus' of null when navigate via tab

Created on 6 Nov 2019  路  1Comment  路  Source: IgniteUI/igniteui-angular

Description

When a user is editing the last possible cell in a row jumping via tab to the next editable will result in an error message "cannot read property 'focus' of null".

  • igniteui-angular version: 8.2.6
  • browser: Chrome 78.0.3904.87

Steps to reproduce

https://stackblitz.com/edit/angular-dz8ewu

  1. Start editing the price
  2. Tab to the next possible editable
  3. The above exception will be thrown

Result

Cannot read property 'focus' of null

TypeError: Cannot read property 'focus' of null at IgxGridNavigationService.push../node_modules/igniteui-angular/fesm5/igniteui-angular.js.IgxGridNavigationService.focusEditableTarget (igniteui-angular.js:57988) at IgxGridNavigationService.push../node_modules/igniteui-angular/fesm5/igniteui-angular.js.IgxGridNavigationService.moveNextEditable (igniteui-angular.js:57974) at IgxGridNavigationService.push../node_modules/igniteui-angular/fesm5/igniteui-angular.js.IgxGridNavigationService.performTab (igniteui-angular.js:58414) at IgxGridCellComponent.push../node_modules/igniteui-angular/fesm5/igniteui-angular.js.IgxGridCellComponent.handleTab (igniteui-angular.js:49260) at IgxGridCellComponent.push../node_modules/igniteui-angular/fesm5/igniteui-angular.js.IgxGridCellComponent.dispatchEvent (igniteui-angular.js:49368) at Object.eval [as handleEvent] (IgxGridRowComponent.html:42) at handleEvent (core.js:29238) at callWithDebugContext (core.js:30308) at Object.debugHandleEvent [as handleEvent] (core.js:30035) at dispatchEvent (core.js:19858)

Expected result

No exception should be thrown. Navigate to either next editable on the next row or stay at the current row.

bug general row-editing high resolved 8.2.6

Most helpful comment

Hello @RolandTa , In the sample that you've linked above you are enabled row editing and also you've defined a custom row edit template which is empty. When a row is in edit mode keyboard navigation behave as is described in our official documentation. In the linked Pull Request I only remove the error that is thrown and if you need to define any custom behavior you can use onGridKeydown event to add any custom logic that will fulfill your use case. Check this sample

>All comments

Hello @RolandTa , In the sample that you've linked above you are enabled row editing and also you've defined a custom row edit template which is empty. When a row is in edit mode keyboard navigation behave as is described in our official documentation. In the linked Pull Request I only remove the error that is thrown and if you need to define any custom behavior you can use onGridKeydown event to add any custom logic that will fulfill your use case. Check this sample

Was this page helpful?
0 / 5 - 0 ratings

Related issues

brianlagunas picture brianlagunas  路  3Comments

ChronosSF picture ChronosSF  路  3Comments

nikunjgajera picture nikunjgajera  路  3Comments

furugen picture furugen  路  3Comments

nikunjgajera picture nikunjgajera  路  3Comments