Tabview: Space key is not working inside TabPanel header template.
Describe the bug
I've added an input component in tab panel header template.
I've noticed that "space" key is not working when I try to write something inside the input component.
Environment
https://stackblitz.com/edit/njuv7d-6gn33a?file=src%2Fapp%2Fdemo%2Ftab-view-template-demo.html
Reproducer
https://stackblitz.com/edit/njuv7d-6gn33a?file=src%2Fapp%2Fdemo%2Ftab-view-template-demo.html
Angular version
17.3.1
PrimeNG version
17.15.0
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
20.10.0
Browser(s)
Chrome 124.0.6367.91
Steps to reproduce the behavior
1.Create a Tabview component.
2.Add one or more tab panels
3.Add header template inside p-tabPanel
<ng-template pTemplate="header"> <i class="pi pi-calendar"></i> <span>Header I</span> <input placeholder="'test'"> </ng-template>
4.Try to type something inside input and add a couple of spaces
Expected behavior
The expected behavior is to be able to write something with spaces like: "This is a test and spaces are working"
We have encountered a similiar issue in the OrderList component with a nested Panel Component.
To solve it we added the following keyboard event Listener to the input:
(keydown.space)="$event.stopPropagation()"
This will stop the eventListener of the primeng component from triggering.
In the OrderList it was selecting/deselecting the current item instead of inserting spaces into the input fields.
We have encountered a similiar issue in the OrderList component with a nested Panel Component. To solve it we added the following keyboard event Listener to the input:
(keydown.space)="$event.stopPropagation()"This will stop the eventListener of the primeng component from triggering. In the OrderList it was selecting/deselecting the current item instead of inserting spaces into the input fields.
Yes. I actually did that after I was looking in lib component and noticed that they have different actions on "Space" , "Enter" and so on.
Also happens to me with OrderList in version 17.17.0. (keydown.space)="$event.stopPropagation()" indeed solves the issue.
Seems related to https://github.com/primefaces/primeng/issues/14531 and https://github.com/primefaces/primeng/issues/14377. The fix mentioned in the second issue also works, i.e. replacing the onSpaceKey method of the component which swallows the space key: https://github.com/primefaces/primeng/blob/17.17.0/src/app/components/orderlist/orderlist.ts#L811-L812