Tabview: Space key is not working inside TabPanel header template.

[lcotfas]

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"

[mjlux]

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.

[lcotfas]

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.

[AlphaHydrae]

Also happens to me with OrderList in version 17.17.0. (keydown.space)="$event.stopPropagation()" indeed solves the issue.

Seems related to #14531 and #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

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,