fix: prevent duplicate tag addition #2540
Conversation
|
|
✅ PR title follows Conventional Commits specification. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 47c816b:
|
kabilansakthivelu
requested review from
chaitanyadeorukhkar,
kamleshchandnani,
anuraghazra,
snitin315,
saurabhdaware and
tewarig
as code owners
| } else { | ||
| onTagChange?.({ tags: getNewTagsArray(tagIndex) }); | ||
| } | ||
| onTagChange?.({ tags: getNewTagsArray(tagIndex) }); |
There was a problem hiding this comment.
Wouldn't this mean that onTagChange won't be called when tags are uncontrolled? we still want to call onTagChange in those scenarios right?
There was a problem hiding this comment.
We have onTagChange passed as callback for onChange into useControllableState hook [ref].
And this is getting invoked inside updateValue function when we call setTagsValue incase of uncontrolled input. Hence moved the onTagChange into else branch to prevent getting called twice for uncontrolled input.
| @@ -146,20 +145,23 @@ const useTaggedInput = ({ | |||
| const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim(); | |||
| if (e.key === 'Enter' || e.key === ',') { | |||
| e.event.preventDefault?.(); // we don't want textarea to treat enter as line break in tagged inputs | |||
| if (inputValue) { | |||
| const isDuplicateTag = currentTags?.includes(inputValue); | |||
There was a problem hiding this comment.
Consumers should handle this no? from UX, if our end-user tries to add duplicate tag it should not add that tag and show validation error with message something like "tag already exist" which should be handled on consumer-side 🤔 . It shouldn't magically not add tag if user is trying to add
There was a problem hiding this comment.
understood. thanks for the clarification. removing the duplicate tag check added
Description
TaggedInput, added a check to avoid duplicate tag additiononChangewill be called fromuseControllableStatehook, wrapped theonTagChangefor controlled component insideelsebranch to avoid getting called twice for uncontrolled componentChanges
Current behaviour:
TaggedInput, thekeyprop is constructed for eachtagusing key={${tagName}-${tagIndex}}isTagVisibleprop value as false and few other duplicated tags as non-removableScreen.Recording.2025-02-13.at.16.47.21.mov
Changes made:
onTagChangeinvocation part insideelsebranch to avoid getting called twice incase ofuncontrolledtagged input as it will be called once throughuseControllableStatehookScreen.Recording.2025-02-13.at.16.51.52.mov
Kindly suggest whether we need to prevent the duplicate tag addition or do we need to remove the already existing tag of same input value on hitting [Enter]
Additional Information
Component Checklist