Igniteui-angular: igx-grid: Uncommitted IME text gets lost when Enter key is pressed in an edit cell template.

[mkamiishi]

Description

Uncommitted IME text gets lost when Enter key is pressed in an edit cell template.

• igniteui-angular version: 7.2.0
• browser: IE11

Steps to reproduce

1.Run the sample.
2.Double click any cell in "col2" column.
3.Enable IME input.
4.Enter some characters.
5.Press Enter key.

Result

Inputs get lost.

Expected result

Inputs should be committed.

Attachments

Attach a sample if available, and screenshots, if applicable.
igxGrid.zip

[tkiryu]

@mkamiishi, here is a workaround.

    <ng-template igxCellEditor let-cell="cell">
      <input ...
             (compositionstart)="cell.isInCompositionMode = true"
             (compositionend)="cell.isInCompositionMode = false">
    </ng-template>

• isInCompositionMode = true when compositionstart is fired.
• isInCompositionMode = false when compositionend is fired.

https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcellcomponent.html#isincompositionmode

[tkiryu]

@zdrawku, this is related to #2525. Unfortunately, the fix for #2525 can't cover edit cell template.

I think that the complete solution for #2525 and #4314 is listening compositionstart and compositionend by using HostListener.

// cell.component.ts
    ...
    @HostListener('compositionstart', ['$event'])
    private onCompositionstart(event) {
        this.isInCompositionMode = true;
    }

    @HostListener('compositionend', ['$event'])
    private onCompositionend(event) {
        this.isInCompositionMode = false;
    }
    ...

I hope this will help!