We are using the details section of the grid to host a rich text editor.

The problem is that when the user is in the rich text editor, they cannot use any keys that are used for grid navigation. Like space, which is somewhat critical in a text editor.

We have a partial solution where we disabled the grid's clipboard options when the text editor tells us it got focus and re-enable the clipboard options when the editor loses focus. However, it seems that various activities (such as clicking on the text editor's toolbar) will cause the grid to set focus on the detail cell (shown by red outline) and we lose the get/lost focus events from the grid which then disables the navigation keys.

We have tried hooking the various cell events to implement the clipboard options hack, but the ones we have tried (cellEditEnter, onCellClick) do not appear to fire when the detail cell receives focus.

Can someone please let us know how to disable the grid navigation when the detail cell has focus?

Here is a quick snapshot of our grid definition and details setup:

<igx-grid #grid displayDensity="compact" autoGenerate="false" [rowHeight]="32" [pinning]="pinningConfig" [primaryKey]="primaryKey" rowSelection="multiple" cellSelection="none" (onRowSelectionChange)="onRowSelectionChange($event)" (onSortingDone)="onSortingDone($event)" (onGridKeydown)="onGridKeydown($event)" (cellEditEnter)="editCellStarting($event)" (cellEditDone)="editCellDone($event)" (onCellClick)="onCellClick($event)">
    ...
    <ng-template igxGridDetail let-dataItem *ngIf="useDetailsArea">
        <div style="width: 100%">
            <div style="clear: both; width: 100%; padding-bottom: 10px;" *ngIf="detailsNoteFieldName">
                <quill-editor id="{{ 'editorId' + dataItem[primaryKey] }}" [(ngModel)]="dataItem[detailsNoteFieldName]" [classes]="!rowIsEditable(dataItem) || !columnNameIsEditable(detailsNoteFieldName) ? 'disabled' : ''" [modules]="quillConfig" [readOnly]="!rowIsEditable(dataItem) || !columnNameIsEditable(detailsNoteFieldName)" (onSelectionChanged)="onEditorSelectionChanged($event)"></quill-editor>
            </div>
        </div>
    </ng-template>