Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Key Events on Input Fields in TreeTable Are Intercepted #16428

Open
fyan0125 opened this issue Sep 25, 2024 · 0 comments
Open

Key Events on Input Fields in TreeTable Are Intercepted #16428

fyan0125 opened this issue Sep 25, 2024 · 0 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@fyan0125
Copy link

Describe the bug

Description:

I am experiencing an issue with the TreeTable component where key events on input elements within the TreeTable are not functioning as expected. It seems that these key events are being blocked or overridden by the internal event handling of the TreeTable.

Steps to Reproduce:

  1. Create a TreeTable with an input element in one of the cells, as shown below:
<p-treeTable #treetable  [value]="files" [scrollable]="true">
    <ng-template pTemplate="body" let-node>
        <tr>
            <td>
                <input type="text" (keydown)="handleInputKeydown($event)" />
            </td>
        </tr>
    </ng-template>
</p-treeTable>
  1. Focus on the input element and press any key.

Expected Behavior:

The key events should be handled by the input element, allowing the user to interact with it as intended.

Actual Behavior:

The key events do not trigger the input's event handler because they seem to be intercepted or blocked by the TreeTable's internal event handling logic.

Additional Information:

I have tried setting tabindex="-1" on the TreeTable and preventing default actions in the keydown event, but the issue persists.
This behavior impacts user experience as it prevents normal interaction with input fields inside the TreeTable.
Environment:

Browser: Google Chrome
Thank you for your assistance!

Environment

Angular

Reproducer

No response

Angular version

18.0.0

PrimeNG version

17.18.9

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.20.3

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

@fyan0125 fyan0125 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant