Igniteui-angular: igx-grid combined with drop-down element causes arrow key(s) to exit dropdown menu and focus grid cell

[VirtualisProject]

Description

igx-grid combined with drop-down element (currently using mat-select) causes arrow keys (for navigating the drop down) to exit dropdown menu and focus cell in grid, only happens for arrow key up.

• igniteui-angular version: 7.3.1
• browser: Chrome

Steps to reproduce

1. Try populating a igx-column with a 'mat-select' drop down menu and filter options with the arrow keys

Result

Arrow key 'down' work as expected, next element in list is focused. Arrow key 'up' sets focus to grid cell above current active cell.

Expected result

Arrow key's down and up (when having a open drop down menu) should navigate the list, not the grid.

Attachments

[ViktorSlavov]

@VirtualisProject
When using a custom editor template inside of the grid cell, you need to have it take focus when the cell is in edit mode.
This can easily be done using the IgxFocus directive.
Here is an example of using the mat-select control as a grid cell editing template.
Alternatively, you can use our very own igx-select control - it provides you with a single select component without the need to import a whole other package + css - here is an example.

[VirtualisProject]

Hello @ViktorSlavov ,

Unfortunatly only using the directive does not work. The grid cell still steals focus from the input when arrow keys etc are clicked inside the mat-input.

I've tested with this simple code right here:

<igx-grid #stepGrid [data]="failures" [primaryKey]="'Idx'" width="100%">
    <igx-column field="Comments" [dataType]="'string'" [width]="'20%'">
        <ng-template igxCell let-cell="cell">
            <mat-form-field class="width-full">
                <input matInput igxFocus [ngModel]="cell.value" />
            </mat-form-field>
        </ng-template>
    </igx-column>
</igx-grid>