Skip to content

fix(ui): make watch path remove (X) button clickable#4878

Closed
Siumauricio wants to merge 1 commit into
canaryfrom
fix/watchpath-delete-pointer-events
Closed

fix(ui): make watch path remove (X) button clickable#4878
Siumauricio wants to merge 1 commit into
canaryfrom
fix/watchpath-delete-pointer-events

Conversation

@Siumauricio

Copy link
Copy Markdown
Contributor

Problem

On an application's git provider config, clicking the X on a watch path badge does nothing — the path can be added but never removed.

Closes #4780

Cause

The remove X is a lucide <X> rendered as a direct SVG child of <Badge>. The Badge base class includes [&>svg]:pointer-events-none (introduced in the Tailwind v4 / shadcn update, commit 3ca5afd49). That rule sets pointer-events: none on the icon, so the click lands on the Badge instead of the X and the onClick (which splices the item out) never runs. The removal logic itself is correct — it just never fires.

Fix

Add pointer-events-auto to each remove X so it stays clickable despite the Badge rule. The same broken pattern exists across all git provider components, so this covers:

  • 5 application git providers (git, github, gitlab, gitea, bitbucket)
  • 5 compose git providers
  • preview-deployment branch filters
  • domain middlewares list (handle-domain.tsx)

Verification

Reproduced and verified in the browser: with pointer-events: none, elementFromPoint over the X returns the Badge (not the SVG) and the badge intercepts the click; after the fix the SVG receives the click and the path badge is removed on click.

The X button to remove a watch path (and domain middlewares) is a lucide
<X> rendered as a direct SVG child of <Badge>. The Badge base class
includes [&>svg]:pointer-events-none (added in the Tailwind v4 / shadcn
update), so the click never reached the icon and its onClick never ran —
adding a path worked but removing did nothing.

Add pointer-events-auto to each remove X so it stays clickable. Applies
to all 5 application git providers, all 5 compose git providers, the
preview-deployment filters, and the domain middlewares list.

Fixes #4780
@dosubot dosubot Bot added size:S This PR changes 10-29 lines, ignoring generated files. bug Something isn't working labels Jul 21, 2026
@Siumauricio

Copy link
Copy Markdown
Contributor Author

Closing in favor of #4827, which fixes the same bug (#4780) more correctly.

My approach here added pointer-events-auto to each icon, but that class (specificity 0,1,0) actually loses to the badge's [&>svg]:pointer-events-none rule (.badge > svg = 0,1,1) on specificity — so it wouldn't reliably work in production. #4827 instead scopes the badge rule itself to [&>svg:not(.cursor-pointer)]:pointer-events-none, a single-file fix at the root that all removable badge icons already satisfy. That's the better fix.

@Siumauricio
Siumauricio deleted the fix/watchpath-delete-pointer-events branch July 21, 2026 00:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Unable to delete a watchpath

1 participant