FlexGrid prevents detection of keydown events

FlexGrid prevents detection of keydown events

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

• 

  seaninglis

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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?

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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