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

Dropdown: event propagation is halted, but default behavior is not prevented #7423

Closed
toddburnside opened this issue Nov 15, 2024 · 1 comment · Fixed by #7424
Closed

Dropdown: event propagation is halted, but default behavior is not prevented #7423

toddburnside opened this issue Nov 15, 2024 · 1 comment · Fixed by #7424
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@toddburnside
Copy link
Contributor

Describe the bug

We have a dropdown inside of a <a tag. We placed the dropdown inside of a <span so that we could capture the onClick event and call event.preventDefault() (and event.stopPropagation()) to stop the default behavior of navigating to the URL in the <a tag. However, in primereact 10.8.4, event.stopPropagation() was added to the click handler in the dropdown. Now, the click handler in our <span no longer receives the event, so can no longer call event.preventDefault().

I think the best solution is to also call event.preventDefault() within the dropdown onClick handler. I will submit a PR to that effect.

I have include a stackblitz below. Unfortunately, the problem does not manifest itself while running in stackblitz. However, if you download it and run it locally in Chrome, you will see that clicking on the dropdown navigates to google.com.

Reproducer

https://stackblitz.com/edit/vitejs-vite-hizbrv?file=src%2FApp.tsx

System Information

System:
    OS: macOS 15.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 418.61 MB / 64.00 GB
    Shell: 5.2.32 - /nix/store/jin4ifpw4bvi554g02phy668gvaylqn1-bash-interactive-5.2p32/bin/bash
  Binaries:
    Node: 20.17.0 - /nix/store/fkapwdcjn9fm1n071jv7a75cw66x4wq7-nodejs-20.17.0/bin/node
    npm: 10.8.2 - /nix/store/fkapwdcjn9fm1n071jv7a75cw66x4wq7-nodejs-20.17.0/bin/npm
  Browsers:
    Chrome: 123.0.6312.124
    Safari: 18.1
  npmPackages:
    primereact: 10.8.4 => 10.8.4 
    react: ^18.2.0 => 18.2.0

Steps to reproduce the behavior

  1. Download the stackblitz project and run locally.
  2. Click on the dropdown to open it.
  3. See that you navigate to google.com

Expected behavior

The dropdown prevents the default onClick behavior as well as stopping the propagation. It seems that any user would expect the dropdown to handle the click. The alternative is for the dropdown to NOT stop propagation, and individual projects would be responsible for stopping propagation as needed.

@toddburnside toddburnside added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 15, 2024
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 15, 2024
@melloware melloware added this to the 10.8.5 milestone Nov 15, 2024
@melloware
Copy link
Member

Sure submit a PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants