primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.56k stars 4.61k forks source link

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

Open lcotfas opened 6 months ago

lcotfas commented 6 months ago

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 ` Header I

` 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 commented 6 months ago

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 commented 6 months ago

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 commented 5 months ago

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