primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.9k stars 1.05k forks source link

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

Closed toddburnside closed 2 hours ago

toddburnside commented 2 hours ago

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.

melloware commented 2 hours ago

Sure submit a PR