Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Michael Dahm
350
Cannot press space or arrow keys in input-field in an igx-grid
posted

Hi everyone,

I use an igx-grid in my application. It looks like this:


And my test-data is defined like this:

In the table I display simple input-fields which hold my data.

However, when my cursor is in the input field, I can press mostly all keys. But I cannot press the space button, the input-field simply does not add a whitespace-character to my text. The navigation with the left and right arrow-keys does also not work in this input-field.

Is there something I need to change or anything else I need to do, to make the input-fields work correctly in an igx-grid?

If you need further information, please let me know.

Thanks in advance.

Regards

Michael

  • 700
    Verified Answer
    Offline posted

    Hello Michael,

    Thank you for posting in our community!

    I have been looking into your question and an approach I could suggest is using the input element’s keydown event and calling it’s stopPropagation method.

    For this specific example, this should look like the following:

    // component.html
<igx-column header="input header" field="value">
    <ng-template igxCell let-cell="cell">
        <igx-input-group>
            <input
                igxInput
                type="text"
                [(ngModel)]="cell.row.data.value"
                (keydown)="onKeyDown($event)"
            />
        </igx-input-group>
    </ng-template>
</igx-column>
     

    // component.ts
public onKeyDown(keyDown: KeyboardEvent) {
    keyDown.stopPropagation();
}
     

    Additionally, in order to demonstrate my suggestion, I have prepared a small sample, where I am using the abovementioned approach and I am able to add a whitespace character and also to navigate with the left and right arrow keys.

    Here could be found my sample for your reference. Please test it on your side and let me know if you need any further assistance regarding this matter.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Entry Level Software Developer