primefaces / primefaces/primereact
ConfirmPopup: Arrow not correctly rendered
Open
Nobody has claimed this yet.
Status: Needs Triage
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
The arrow isn't rendered properly when the target element is small (like an icon). It's rendered outside of the actual popup box.
Reproducer
https://stackblitz.com/edit/j15mhjvy?file=src%2FApp.jsx
System Information
System:
OS: macOS 15.6.1
CPU: (10) arm64 Apple M1 Pro
Memory: 2.12 GB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
pnpm: 9.12.1 - /opt/homebrew/bin/pnpm
Watchman: 2024.11.04.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 140.0.7339.133
Safari: 18.6
npmPackages:
primereact: ^10.9.7 => 10.9.7
react: ^19.1.1 => 19.1.1
Steps to reproduce the behavior
- Click the X icon
- Look at the arrow being misplaced
Expected behavior
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproducer and the ConfirmPopup entry point, then click the X icon with the target set to a small element such as an icon. Inspect how the arrow is positioned relative to the popup box and compare it with the attached screenshot. Done means the arrow is rendered within the actual popup box for small targets.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100