feat(tags): add tag selector dropdown with multi-select & autocomplete #213
Conversation
| }; | ||
|
|
||
| // Handle adding a tag | ||
| const handleAddTag = () => { |
There was a problem hiding this comment.
why was this removed?
There was a problem hiding this comment.
This code was removed because we no longer use the manual tag-input flow.
The new TagSelector component now handles all tag interactions - searching, selecting, creating, and toggling tags, so the previous tagInput state and handleAddTag() function were unused.
Removing this avoids duplicated logic and keeps the tagging workflow unified under the new component. and I thought this one is a good way.
| @@ -0,0 +1,138 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
i dont think this file belongs here, as these are mostly auto-generated via shadcn, is this from shadcn?
There was a problem hiding this comment.
This component isn’t auto-generated by shadcn - it’s a custom UI component I built using shadcn primitives (popover, command, button, etc.).
Since it behaves like our other reusable UI components (such as multiSelect.tsx and date-picker.tsx), it fits naturally inside the components/ui folder.
That’s why I placed tagSelector.tsx there.
ShivaGupta-14
left a comment
ShivaGupta-14
left a comment
There was a problem hiding this comment.
@its-me-abhishek Thanks for the review! I’ve responded to the inline comments with my reasoning, but I’m open to any suggestions if you feel a different approach or structure would work better.
| }; | ||
|
|
||
| // Handle adding a tag | ||
| const handleAddTag = () => { |
There was a problem hiding this comment.
This code was removed because we no longer use the manual tag-input flow.
The new TagSelector component now handles all tag interactions - searching, selecting, creating, and toggling tags, so the previous tagInput state and handleAddTag() function were unused.
Removing this avoids duplicated logic and keeps the tagging workflow unified under the new component. and I thought this one is a good way.
| @@ -0,0 +1,138 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
This component isn’t auto-generated by shadcn - it’s a custom UI component I built using shadcn primitives (popover, command, button, etc.).
Since it behaves like our other reusable UI components (such as multiSelect.tsx and date-picker.tsx), it fits naturally inside the components/ui folder.
That’s why I placed tagSelector.tsx there.
ShivaGupta-14
force-pushed
the
feat/210-tag-dropdown-selection
branch
4 times, most recently
from
8fec9c4 to
cff668e
Compare
Implemented new TagSelector component with searchable dropdown and create-tag support. Replaced manual tag input in Add Task and Edit Task dialogs. Integrated existing user-defined tags (uniqueTags) into the selector. Removed Popover.Portal to fix cursor and interaction issues inside dialogs. Updated tests to mock TagSelector and verify new tag state updates. Improves tagging UX and prevents inconsistent or typo-prone tags. Fixes: CCExtractor#210
ShivaGupta-14
force-pushed
the
feat/210-tag-dropdown-selection
branch
from
cff668e to
ec2cec0
Compare
ShivaGupta-14
force-pushed
the
feat/210-tag-dropdown-selection
branch
from
ec2cec0 to
46b78b3
Compare
2 participants
Description
This PR introduces a new TagSelector component that enhances the tagging workflow across the application.
The previous free-text tag input has been replaced with a searchable multi-select dropdown that also supports creating new tags directly from the selector.
Key Changes
New TagSelector Component
Integration in Task Dialogs
Tag Management Improvements
uniqueTags) into the selector.Popover Fix
Popover.Portalbecause it caused cursor detection and interaction issues when the selector was used inside dialogs.Testing
Checklist
npx prettier --write .(for formatting)gofmt -w .(for Go backend)npm test(for JS/TS testing)Additional Notes
Video : Link
Screenshots :