primefaces / primeng

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

pSelectableRow blocks typing space on inputs in p-table #15160

Open NexPlex opened 5 months ago

NexPlex commented 5 months ago

Describe the bug

Current behavior a row with pSelectableRow (<tr [pSelectableRow]="...">) blocks inputs from typing whitespace.

I used parth181195 fix for now

https://github.com/primefaces/primeng/issues/9893

Environment

"primeng": "^16.9.1", "@angular/core": "16.2.12", "@angular/forms": "16.2.12",

Reproducer

No response

Angular version

16.2.12

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.10.0

Browser(s)

No response

Steps to reproduce the behavior

Click on field will not take any spaces nor can I paste.

Expected behavior

Accept spaces and allow pasting

NexPlex commented 5 months ago

I am using this code

@HostListener('keydown.space', ['$event']) onSpaceKeyDown(event: KeyboardEvent & { target: HTMLInputElement}) { // Prevent the default space key action

  const target = event.target;
  console.log('onSpaceKeyDown',  event, target);

  // Check if the target is an HTML input element and is inside a selectable row
  if (target.hasAttribute('pinputtext')) {
    console.log('Space key down inside pSelectableRow input');
    event.stopPropagation();
    event.preventDefault();
    const startPos = target.selectionStart;
    const endPos = target.selectionEnd;

     if (typeof startPos === 'number' && typeof endPos === 'number') {
       // Insert the space character at the current cursor position
       const originalText = target.value;
       const textBeforeCursor = originalText.substring(0, startPos);
       const textAfterCursor = originalText.substring(endPos, originalText.length);

       // Set the new value
       target.value = textBeforeCursor + ' ' + textAfterCursor;

       // Move the cursor position right after the inserted space
       const newCursorPos = startPos + 1;
       target.setSelectionRange(newCursorPos, newCursorPos);

       // Maintain focus on the input
       target.focus();

       // Append a space to the current value
       // target.value += ' ';
       // event.target['value'] = event.target['value'] + ' ';
       // (event.target as HTMLElement).focus();
     }
     } else {
    // If it's not the right type of element or not in the right context, stop the event propagation

  }
}
LoganDupont commented 1 week ago

This is also the case for a textarea in a tree. See https://github.com/primefaces/primeng/issues/9893#issuecomment-2124901733