feat(tags): implement tags dropdown in Add/Edit Task dialogs

[ShivaGupta-14]

Description

• Create SearchAndAddSelector component with search, select, and create functionality
• Use local Popover (no Portal) to fix click-through issue in Dialog without modifying global popover.tsx
• Display selected tags as removable chips with X buttons
• Add search filtering for existing tags
• Add inline "Create new tag" option for non-existing tags
• Integrate SearchAndAddSelector into TaskDialog and AddTaskDialog

Popover-in-Dialog fix (local component approach):

• Created LocalPopoverContent inside SearchAndAddSelector that renders without Portal
• This avoids the click-through issue when Popover is used inside Dialog
• No modifications to global popover.tsx, keeps Shadcn components untouched
• Component is reusable for annotations and other features

Tests:

• Add comprehensive tests for SearchAndAddSelector component

• Update AddTaskDialog tests for new tag selection flow

• Update TaskDialog tests for tag editing with SearchAndAddSelector

• Mock SearchAndAddSelector in tests

• Fixes: Reusable tags for Editing or Adding a task #210

Bug: Tag removal not persisting (Fixed in this PR)

• Video:

Screen.Recording.2026-01-12.at.12.50.58.AM.mov

Bug fix:

• Fix tag removal not persisting: now sends tags with "-" prefix to backend for removals
• Updated handleSaveTags to calculate tag additions and removals correctly

Checklist

• Ran npx prettier --write . (for formatting)
• Ran gofmt -w . (for Go backend)
• Ran npm test (for JS/TS testing)
• Added unit tests, if applicable
• Verified all tests pass
• Updated documentation, if needed

Additional Notes

Demo Video:

• Instant UI update on tag removal (for better UX)

Screen.Recording.2026-01-12.at.12.31.45.AM.mov

Screenshots:

• Before/After (improved UI):

[github-actions]

Thank you for opening this PR!

Before a maintainer takes a look, it would be really helpful if you could walk through your changes using GitHub's review tools.

Please take a moment to:

• Check the "Files changed" tab
• Leave comments on any lines for functions, comments, etc. that are important, non-obvious, or may need attention
• Clarify decisions you made or areas you might be unsure about and/or any future updates being considered.
• Finally, submit all the comments!

More information on how to conduct a self review:
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request

This helps make the review process smoother and gives us a clearer understanding of your thought process.

Once you've added your self-review, we'll continue from our side. Thank you!

[ShivaGupta-14]

self review done! ready for review

[ShivaGupta-14]

Hi @its-me-abhishek!

I’ve added dropdown tests in AddTaskDialog.test.tsx since the logic is identical in both dialogs, for TaskDialog.test.tsx, I only kept the remove/save tests to avoid duplication, should I also add the same dropdown interaction tests there, or is covering it once sufficient? Let me know your preference.

[its-me-abhishek]

Please look into the above comments

[ShivaGupta-14]

on it

[ShivaGupta-14]

done with all changes, ready for review

[its-me-abhishek]

Suggested some changes and fixes

[ShivaGupta-14]

@its-me-abhishek, I understand your suggestions, but before proceeding, I’d genuinely like to get your input. I’ve also opened a PR for the same issue where I implemented a TagSelector component with search and multi-select functionality that shows the selected items. As a user, I personally prefer this approach, but I’d really appreciate your suggestion. I’m happy to proceed with whatever you decide.

[ShivaGupta-14]

I implemented the current solution with considering all things in mind(your review and user experience), but i faced a issue with this ->

Issue faced:

the Popover inside Dialog had a click-through issue. radix UI's Dialog overlay blocks pointer events to Popover content because both use Portal and render at level with the same z-index.

Approaches explored:

• z-index adjustments -> didn't work, the overlay intercepts events regardless of z-index

• modal={false} on Dialog -> works, but breaks expected modal behavior (background scrolls, focus escapes)

• modal={true} on Popover -> Clicks work, but input doesn't receive focus due to focus trap conflict

• Working Solutions:

• Option 1: Remove Portal (Simple)
  remove Primitive.Portal wrapper from popover.tsx, just (1 file change, 2 lines)
  Nothing else changes for this option. Just delete the opening and closing
  Risk: May clip if parent has overflow: hidden

• Option 2: Container Solution (Current implementation)
  Pass container ref from Dialog to Popover (4 files changed, little bit complex to understand in first go)
  no clipping risk, portal behavior preserved

References:

Stackover link: Link
GIthub issue: Link

Current Status

Implemented Container Solution. All tests passing.
Which approach do you prefer?

[ShivaGupta-14]

also we can do one more thing if going with option 1st -> to maintain two popover file (one with portal and one without portal)

[ShivaGupta-14]

@its-me-abhishek self review done, ready for review

[ShivaGupta-14]

@its-me-abhishek thank you for the thoughtful guidance on the channel! Following your suggestion about keeping Shadcn components untouched (for long-term maintainability):

Instead of modifying the global Popover or passing complex refs, I’d suggest to keep the core UI components as-is. If the Popover-in-Dialog issue persists, extend the existing Popover into a separate, local component for this feature. Combine the modified logic with the SearchAndAddSelector by renaming it so it’s reusable for annotations and other parts of the app without touching the global files.

I've refactored the implementation:

• Created a local SearchAndAddSelector component that handles the Popover internally (no Portal, fixes click issue and good UI)
• Kept popover.tsx completely untouched
• Made the component reusable for other features like annotations

All tests passing, happy to make any adjustments based on your review. thanks again for the clear direction, learned a lot from this!

Also, if @Hell1213's PR #390 looks good for the project, happy to go with that approach instead! :)