fix(ui): allow removing watch paths (delete icon click blocked by badge pointer-events)#4785
Closed
fredhii wants to merge 1 commit into
Closed
Conversation
dosubot
Bot
added
size:L
The shadcn Badge base styles include [&>svg]:pointer-events-none, which disabled pointer events on the lucide X icon rendered as a direct child of Badge in the Watch Paths field. As a result the delete onClick never fired and users could not remove a watch path. Wrap the X icon in a real <button type="button"> so the svg is no longer a direct child of Badge, restoring click handling and improving accessibility (keyboard focusable, explicit aria-label). Applies to all git provider forms (github/gitlab/gitea/bitbucket/git) for both application and compose. Closes #4780
fredhii
force-pushed
the
fix/watchpath-badge-delete-pointer-events
branch
from
8dfad46 to
1ac0f40
Compare
Author
|
Closing as a duplicate of #4782, which was opened first and is already under review. I left the accessibility suggestions there so they land on the PR that merges. |
3 tasks
Contributor
|
Done! I've incorporated your accessibility suggestions into my PR (#4782) and perfectly aligned the class structures. I've also added you as a co-author on the commit to give you credit. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #4780
Problem
Watch path badges cannot be removed. Clicking the
Xon a watch-path badge does nothing, so a mistyped path is stuck.Root cause
The shadcn
Badgebase classes (components/ui/badge.tsx) include[&>svg]:pointer-events-none. In the Watch Paths field the lucideXdelete icon is rendered as a direct child of<Badge>, so it inheritspointer-events: noneand itsonClicknever fires. This regressed with the Tailwind v4 / shadcn Badge update — the utility is intended for decorative icons, but here the icon is interactive.Adding
pointer-events-autoon the icon does not help: the[&>svg]parent selector has higher specificity than a standalone utility.Fix
Wrap the
Xicon in a real<button type="button">and move theonClickthere. The svg is no longer a direct child ofBadge, so[&>svg]:pointer-events-noneno longer matches, and click handling is restored. Bonus: the control is now keyboard-focusable with an explicitaria-label, andtype="button"prevents accidental form submits.No changes to the shared
Badgecomponent (other decorative-icon badges keep their intended behavior).Scope
Applied to every git provider form that renders watch-path badges, for both application and compose:
Testing
biome checkpasses clean on all 10 touched files.Xnow removes the badge in the Watch Paths field.