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
Disable arrow keys navigation in cell edit table
-
- Posts: 2
- Joined: 09 Mar 2022, 04:45
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?
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?
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:
Usage:
Hope it helps.
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() {}
}
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>
-
- Information
-
Who is online
Users browsing this forum: No registered users and 5 guests