primeng icon indicating copy to clipboard operation
primeng copied to clipboard

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

Open lcotfas opened this issue 1 year ago • 2 comments

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"

lcotfas avatar Apr 29 '24 10:04 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.

mjlux avatar May 05 '24 06:05 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.

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.

lcotfas avatar May 06 '24 10:05 lcotfas

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

AlphaHydrae avatar May 29 '24 08:05 AlphaHydrae