FlexGrid prevents detection of keydown events

Posted by: seaninglis on 8 January 2022, 4:50 am EST

  • Posted 8 January 2022, 4:50 am EST

    I'm trapping keyup and keydown in my Angular app with a HostLIstener on my app component.

    If I move focus off the Flexgrid, I can see keyup and keydown events both being logged by my handlers - testing with the up and down arrow keys in this case.

    However if I'm navigating around the flexgrid with the up and down arrow keys, the keydown event is not detected in my handler, as if stopPropagation() is being called somewhere for keydown (but not keyup)

    Is this the case? Is there a property I can set on the grid so I can track both events?
  • Replied 8 January 2022, 4:54 am EST

    To add, this seems to be restricted to the cursor keys, ENTER, Page Up/Down, and Home/End
  • Replied 10 January 2022, 5:06 pm EST

    Hi Sean,

    I am afraid this is expected behavior. If the requirement is to add keydown event listeners on FlexGrid and stop the propagation of events to the grid, we need to use the capture phase of the event which is not supported in HostListener (here is the issue link: https://github.com/angular/angular/issues/11200).
    As a workaround, you will need to use the addEventListener method to implement listeners in the capturing phase:

    https://github.com/angular/angular/issues/11200

    Regards,
    Ashwin
  • Replied 15 January 2022, 11:56 am EST

    Hi Ashwin,

    Thanks for the links.

    For clarity my actual requirement is to set a flag on a shared service whenever a keydown event is detected, and where event.repeat is true. I then reset this flag when a keyup event is detected.

    Navigation keys on the grid are what I'm really interested in unfortunately; I want to know if the keyboard is in this repeat state whenever I react to any flexgrid event.

    Sean
  • Marked as Answer

    Replied 17 January 2022, 10:14 pm EST

    Hi,
    For this, you may handle the keydown event for the FlexGrid's hostElement using the HTML addEventListener and set the capture to true to override this handler for all the events.
    Now, you may use a object which will check the keycode and would set the counter if the keycode is same for next keydown event.
    In this way, you would be able to detect the keydown event repeatation and set the flag for service.

    grid.hostElement.addEventListener("keydown",function(e){
    /* code here */
    },true);


    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 18 January 2022, 12:41 am EST

    Hi Manish,

    Thanks for this.

    As it happens, I've ended up doing something with the Angular (keydown) event:

    <wj-flex-grid #resultsGrid
    selectionMode="Row"
    [alternatingRowStep]="0"
    (keydown)="OnGridKey($event)" ...
    (keyup)="OnGridKey($event)" ...
    >

    public OnGridKey(e: any): void {
    this.utils.log('ogkd', e);
    }

    As I don't need to actually interfere with the event, just flag that repeat is in play, this gives me the behaviour I need.

    It might be slightly handier to trap and record this with a handler on the document, but it's no great hardship to add a call to some generic function whenever I need to use this on a grid.

    Thanks to everyone for the pointers!

    Sean

  • Replied 18 January 2022, 10:28 pm EST

    Hello,

    We are glad that you were able to resolve your issue. And thank you for sharing your approach with us.

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels