Igniteui-angular: Cell navigation does not work along with Multi Row Layout group

[ymita]

Description

Cell navigation does not work when cell focus tries to moves to other group.

• igniteui-angular version: 7.3.0-beta.1
• browser: n/a

Steps to reproduce

1. Run the attached sample
2. Set focus on 'ID' cell
3. Hit Tab key 3 times

Result

Chrome and IE11:
Active cell disappears after navigation moves to unpinned group.

Firefox:
Active cell does not move to cells on unpinned group

Expected result

On all supported browsers, cell navigation works.

Attachments

igx-grid-multi-row-layout.zip

[mpavlinov]

@ymita We're still working on keyboard navigation for Multi Row Layout.

[dkamburov]

@ymita rowEnd inputs are not valid in your sample. The correct configuration should be:

<igx-column-layout [pinned]="true" field='group1'>
    <igx-column [rowStart]="1" [rowEnd]="2" [colStart]="1" [colEnd]="2" field="ID" [editable]="true" [width]="'200px'"></igx-column>
    <igx-column [rowStart]="2" [rowEnd]="3" [colStart]="1" [colEnd]="2" field="Country" [editable]="true" [width]="'200px'"></igx-column>
</igx-column-layout>
<igx-column-layout [pinned]="false" field='group2'>
    <igx-column [rowStart]="1" [rowEnd]="2" [colStart]="1" [colEnd]="2" field="CompanyName" [editable]="true" [width]="'200px'" sortable="true" resizable="true"></igx-column>
    <igx-column [rowStart]="1" [rowEnd]="2" [colStart]="2" [colEnd]="4" field="ContactName" [editable]="true" [width]="'400px'"></igx-column>

    <igx-column [rowStart]="2" [rowEnd]="3" [colStart]="1" [colEnd]="2" field="ContactTitle" [editable]="true" [width]="'200px'"></igx-column>
    <igx-column [rowStart]="2" [rowEnd]="3" [colStart]="2" [colEnd]="3" field="Address" [editable]="true" [width]="'200px'"></igx-column>
    <igx-column [rowStart]="2" [rowEnd]="3" [colStart]="3" [colEnd]="4" field="City" [editable]="true" [width]="'200px'"></igx-column>
</igx-column-layout>

[ymita]

@dkamburov Thank you for pointing it out!