Disable arrow keys navigation in cell edit table

[aneesazam]

Hi everyone,

I want to disable arrow keys navigation in primeng cell edit table.
see this demo https://www.primefaces.org/primeng/show ... table/edit

In primeng 10 arrow keys were not functional
https://www.primefaces.org/primeng/v10-lts/#/table/edit

Can someone let me know, how can I do it?

Best Regards
Anees Azam

[DionJoubert]

I have tried and succeeded in manually disabling left and right arrow key navigation, if I disable/comment out the onArrowLeft(event) and onArrowRight(event) events in the following script: \node_modules\primeng\fesm2015\primeng-table.js

I don't believe this is the best solution. I would much rather programmatically disable/remove/override event functions like onArrowLeft(event) and onArrowRight(event), but I don't know how. Did you ever find a solution or does somebody else know if this is possible?

[cmila]

Having your solution as inspiration, I made a directive to prevent those events from propagating upwards. In my case, I wanted to apply it to an input field. Here's my solution:

Code: Select all

@Directive({
  selector: "input[BlockLateralArrowNavigation]",
})
export class BlockLateralArrowNavigationDirective {
  @HostListener("keydown.arrowleft", ["$event"]) arrowLeftPressed(
    event: KeyboardEvent
  ) {
    event.stopPropagation();
  }

  @HostListener("keydown.arrowright", ["$event"]) arrowRightPressed(
    event: KeyboardEvent
  ) {
    event.stopPropagation();
  }

  constructor() {}
}

Usage:

Code: Select all

<p-cellEditor>
  <ng-template pTemplate="input">
  <input
    BlockLateralArrowNavigation
    class="p-inputtext-sm td-offset right-aligned"
    type="text"
    pInputText
    [(ngModel)] = "tmpOffsetInput"
    (keydown)="fixMissingFirstKeystroke($event, variable)"
    (focus)="focusOffsetInput($event, variable)"
    (onChange)="offsetChanged($event, variable)"
    (blur)="tmpOffsetInput = null"
  >
  </ng-template>
  <ng-template pTemplate="output">
      <label class="td-offset right-aligned">{{variable.offset}}</label>
  </ng-template>
</p-cellEditor>

Hope it helps.