Table pSelectableRow: cannot type space into an pInputText component

[Snoppi-Wizard]

Describe the bug

When using pSelectableRow in a table-row and an pInputText component (e.g. in a cell-editor) in a cell it is not possible to type a space-sign into the input field.

Environment

Angular

Reproducer

No response

Angular version

17.0.10

PrimeNG version

17.3.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

Chrome 120

Steps to reproduce the behavior

• Build a p-table
• Add a row with pSelectableRow (<tr [pSelectableRow]="article">)
• Add an pInputText component into the
• Try to type a space sign within text component

Expected behavior

Should be possible to add a space sign

[rdrrichards]

I am having the same issue. I was about to create a issue, but I saw this. This may help to move to a solution quickly. I had to roll back to 16.5.0 to get this to work again.

I am having an issue with a InputText inside of a Table where there is a pSelectableRow set. I have a column with a textbox in it and when the pSelectableRow attribute is set on the table row the textbox does not allow spaces to be typed. If I remove pSelectableRow attribute, then I can add spaces to the value being typed. I need that attribute to make the application work as needed.

Here is the code to repro this issue:

Template:

<p-table [columns]="cols" [value]="interestingSlides" dataKey="slideId">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [style.flex]="col?.width">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-res let-rowData let-slide let-columns="columns" let-rowIndex="rowIndex">
    <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
      <td *ngFor="let col of columns" [style.flex]="col?.width">
        <input type="text" pInputText [(ngModel)]="interestingSlides[rowIndex].otherReason" [style]="{'width':'500px'}"
          maxlength="300" placeholder="primeng table; cannot add spaces here!">
      </td>
    </tr>
  </ng-template>
</p-table>

<input type="text" pInputText [(ngModel)]="interestingSlides[0].otherReason" [style]="{'width':'500px'}" maxlength="300"
  placeholder="Stand alone input text; can add spaces here!">


<table>
  <tr>
    <th *ngFor="let col of cols" [style.flex]="col?.width">
      {{col.header}}
    </th>
  </tr>
  <tr *ngFor="let row of interestingSlides; let j = index">
    <td *ngFor="let col of cols" [style.flex]="col?.width">
      <span *ngIf="!col.header.includes('Date') && !col.header.includes('Reason')">
        {{col.field}}
      </span>
      <span *ngIf="!col.header.includes('Date') && col.header.includes('Other')">
        <input type="text" [(ngModel)]="interestingSlides[j].otherReason" [style]="{'width':'500px'}" maxlength="300"
          placeholder="HTML table (no primeng components); can add spaces here, too!">
      </span>
    </td>
  </tr>
</table>

Backing code:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { TableModule } from 'primeng/table';
import { InputTextModule } from 'primeng/inputtext';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule,
    FormsModule,
    InputTextModule,
    TableModule,
    RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'png-issue';
  interestingSlides: RowData[] = [{ otherReason: undefined }];
  cols: any[] = [
    { field: 'otherReason', header: 'Other Reason', width: '0 0 20%' }
  ];
}

interface RowData {
  otherReason?: string;
}

Can someone explain why this is behaving the way it is?

[fraras]

I think I found the problem with pSelectableRow. In the version 16.8.0 of PrimeNg (In this commit) it has been introduced a listener for the keyDown event of 'ArrowDown', 'ArrowUp', 'Home', 'End', 'Space', 'Enter' keys and the combination of 'CTRL+A' in order to improve the accessibility of the Selectable Rows in a Table. This is probably conflicting with the editable field.

Stackblitz Demo
You can test in the demo that using ctrl+a inside the quantity field in the table is selecting all the rows instead of selecting the text in the field

[mertsincan]

Hi,

Thanks a lot for your report and sample link! I added a milestone. We'll fix it before the milestone is released.

[JulienBier]

The same issue exists when input is in a OrderList component.

[MattMicah]

This is still an issue with the p-columnFilter component.

[EvgeniyGilev]

This is still an issue with the p-columnFilter component.

If you use p-columnFilter and sorting, then you may use (keydown.space)="$event.stopPropagation()" for p-columnFilter, this work for me.