Keyboard navigation Table - Edit with arrows

[DanRic]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

No navigation between editable cells of the turbo-table in Edit mode with arrows (right, left, up and down) like is with tab key.

Expected behavior

Possibility to navigate between the editable cells of different records with the arrows.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 7.0

• PrimeNG version: 7.0

• Browser: [Chrome Last | IE 11 ]

• Language: [all | TypeScript X.X | ES6]

[Tr1monster]

This will be an awsome feature. We realy need this feature for our business case. @yigitfindikli are there any suggestions on the release date of this feature?

[yigitfindikli]

Done @Tr1monster 🏴‍☠️

[ThoSap]

This enhancement accidentally broke the usage of the arrow keys to de- and increase an input number in a pEditableColumn .

[lf-novelt]

also it broke the native input text behavior that, when typing some text, you expect the left arrow to go to the previous character, not to change column.
Is there a way to disable this behavior, at least for the left / right arrows for single line input? or to only change cell if right arrow pressed and cursor is at the last character of the current input?

[lf-novelt]

can anyone reopen this issue in order to fix the broken behavior it introduced or put it behind a config @yigitfindikli?

[jsanz1209]

I'm getting the same thing as @If-novelt

I would like to know too if is there any way for disabled that behaviour, I mean, what I be able navigate between input's characters without changing of column.

Thanks in advance.

[Tr1monster]

It would be awesome if the behaviour could change a little bit. Navigating through the column should not trigger the input behaviour. Maybe it could improved in the following way:

• Arrowkeys not trigger any input behaviour.
• When you press ESC or ENTER/RETURN key you can use the input fields as before. No column change should happen.
• Press the ENTER/RETURN key to submit the changes to the table data.
• Press the ESC key to reject changes.
• Implement a configuration option on table level to disable the behaviour.

Any suggestions on that @yigitfindikli @jsanz1209

[jsanz1209]

It would be awesome if the behaviour could change a little bit. Navigating through the column should not trigger the input behaviour. Maybe it could improved in the following way:

• Arrowkeys not trigger any input behaviour.
• When you press ESC or ENTER/RETURN key you can use the input fields as before. No column change should happen.
• Press the ENTER/RETURN key to submit the changes to the table data.
• Press the ESC key to reject changes.
• Implement a configuration option on table level to disable the behaviour.

Any suggestions on that @yigitfindikli @jsanz1209

+1.

I'm totally right with the behaviour which you had indicated @Tr1monster
Let's see if the PrimeNG team will get back to us with a solution.

[jsanz1209]

Any news about this??

[luisf96]

It would be awesome if the behaviour could change a little bit. Navigating through the column should not trigger the input behaviour. Maybe it could improved in the following way:

• Arrowkeys not trigger any input behaviour.
• When you press ESC or ENTER/RETURN key you can use the input fields as before. No column change should happen.
• Press the ENTER/RETURN key to submit the changes to the table data.
• Press the ESC key to reject changes.
• Implement a configuration option on table level to disable the behaviour.

Any suggestions on that @yigitfindikli @jsanz1209

+1.

Please fix this!!

Input leaving is very confused for users when they just want to edit some character.

[aneesazam]

Hi everyone

Althouhg it is a feature but in my case this feature is playing a role of searious bug so I disable following methods definition in "\node_modules\primeng\fesm2015\primeng-table.js" and now happy with table:-

onArrowUp(event)
onArrowDown(event)
onArrowLeft(event)
onArrowRight(event)

[lf-novelt]

hello, and happy new year @yigitfindikli, can we reopen this ticket to make this feature configurable?

[homerchap]

I think I have figured out a workaround for it. On the input filed I add this,

(keydown.ArrowRight)="doNothing($event)"

Then in the component I add this function.

doNothing(e: any) {
e.stopPropagation();
return;
}

This is stopping the code in the primeng-table.js from running. You can add ArrowLeft or anything else you want as well.

[luisf96]

I think I have figured out a workaround for it. On the input filed I add this,

(keydown.ArrowRight)="doNothing($event)"

Then in the component I add this function.

doNothing(e: any) { e.stopPropagation(); return; }

This is stopping the code in the primeng-table.js from running. You can add ArrowLeft or anything else you want as well.

That works! Thanks @homerchap

[Yuri-Lima]

Hey, thanks for that!! @homerchap It works 👍

[thomas-arun]

I think I have figured out a workaround for it. On the input filed I add this,

(keydown.ArrowRight)="doNothing($event)"

Then in the component I add this function.

doNothing(e: any) { e.stopPropagation(); return; }

This is stopping the code in the primeng-table.js from running. You can add ArrowLeft or anything else you want as well.

@homerchap Thanks you are a life saver.