pSelectableRow blocks typing space on inputs in p-table

[themhassany]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

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

Expected behavior
We should be able to type whitespace in the inputs.

Minimal reproduction of the problem with instructions
https://codesandbox.io/s/lucid-shirley-53rlx?file=/src/app/app.component.html:233-247

The textarea will ignore the whitespace typed by the keyboard.

• Angular version: 11.2.0
• PrimeNG version: 11.2.1
• Browser: [Chrome 88.0.4324.150 | Firefox 85.0.2 | not tested others]

[themhassany]

I have reviewed the pSelectableRow directive. There is an event listener that cause this.

@HostListener('keydown.space', ['$event'])
onSpaceKeyDown(event: KeyboardEvent) {
    event.preventDefault();
}

can someone describe, why such a listener is needed?

[themhassany]

a temporary fix can be the using (keydown.space)="$event.stopPropagation();" on text inputs. but this is not feasible for inputs in 3rd party components (e.g: filter input on p-dropdown)

[parth181195]

for some one looking for quick way to fix this and add space to inputs u can override this with this snippet

    @HostListener('keydown.space', ['$event'])
    onSpaceKeyDown(event: KeyboardEvent) {
        event.stopPropagation();
        event.preventDefault();
        if (event.target) {
            event.target['value'] = event.target['value'] + ' ';
            (event.target as HTMLElement).focus();
        }
    }

[philipp-doblhofer]

#14127 re-introduces this bug with commit d6a22d6

[NagornovAlex]

Ran into this issue. Had to implement workaround provided above. Please reopen the issue.

[Logic-Bits]

can confirm this is a big issue! setting [pSelectableRow]="rowData" and [pSelectableRowIndex]="rowIndex" also gives that faulty behavior

[NexPlex]

I too, have the same issue I used parth181195 fix for now

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

[Alextremeee]

This also seems to be an issue with a text area inside a Tree caused by this commit #14123. Looks like arrow keys, space, numpad enter and enter will all trigger a prevent default that will all break nested input/textarea elements.

[saidsoualhi]

for some one looking for quick way to fix this and add space to inputs u can override this with this snippet

    @HostListener('keydown.space', ['$event'])
    onSpaceKeyDown(event: KeyboardEvent) {
        event.stopPropagation();
        event.preventDefault();
        if (event.target) {
            event.target['value'] = event.target['value'] + ' ';
            (event.target as HTMLElement).focus();
        }
    }

This doesn't work when you type a space between characters, it keeps adding space at the end.