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

[ShivaGupta-14]

Description

• Replace text input with Select dropdown for tag selection
• Add "Create new tag" option in dropdown
• Display selected tags as removable badges
• Add uniqueTags, isCreatingNewTag, setIsCreatingNewTag props
• Add data-testid to Priority, Tags, Recur SelectTriggers

Tests:

• Update Select component mocks for testing
• Rewrite tag tests to use dropdown selection
• Add tests for dropdown selection and tag removal

Fixes: #210

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

Video

Screen.Recording.2025-12-30.at.10.52.35.PM.mov

Screenshots

[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)