Bug: Client-side error when re-selecting a newly created tag
Description
When a user creates a new tag and selects it, everything works as expected initially. However, if the tag is later unselected and then selected again, a client-side error occurs.
This issue appears specifically with newly created tags and does not affect pre-existing tags.
Screen recording demonstrating the issue:
https://drive.google.com/file/d/1fUqg7oJ1oHXJTAk50XxBY_oc3mogA2bH/view
Steps to Reproduce
- Navigate to "New Link" creation page
- Open Tags → Select tags
- Create a new tag
- Select the newly created tag
- Unselect/remove the tag
- Select the same tag again
Possible Root Cause
This issue appears to be caused by a state inconsistency between the tag-select component and the @dub/ui ComboBox component, combined with improper cache mutation.
-
When a new tag is created, it is displayed correctly in the UI via the ComboBox component
-
However, the internal state used by the tag-select component does not contain the full data of the newly created tag
-
This creates a mismatch where:
- The UI shows a valid tag option
- But the underlying state does not have a corresponding, consistent object
-
After unselecting and re-selecting:
- The component attempts to use tag data from state
- But since the state is incomplete or inconsistent, it results in a client-side error
Additionally:
-
The useTags hook mutation logic does not properly update or revalidate all relevant queries
-
As a result, the latest tag list is not reliably reflected across:
- Base query (no search)
- Search-based queries
This leads to stale or partially updated data being used in the component.
🛠 Proposed Fix
-
Ensure that newly created tags are properly normalized and inserted into state, not just rendered via UI components
-
Fix the synchronization between:
@dub/ui ComboBox data
- Internal
tag-select state
-
Improve cache mutation strategy in useTags:
-
Optionally:
- Trigger a re-fetch after tag creation to ensure consistency across all queries
- Avoid relying on UI-rendered data that is not present in state
Contribution
I have identified the root cause and a potential fix, and would like to work on this issue.
Bug: Client-side error when re-selecting a newly created tag
Description
When a user creates a new tag and selects it, everything works as expected initially. However, if the tag is later unselected and then selected again, a client-side error occurs.
This issue appears specifically with newly created tags and does not affect pre-existing tags.
Screen recording demonstrating the issue:
https://drive.google.com/file/d/1fUqg7oJ1oHXJTAk50XxBY_oc3mogA2bH/view
Steps to Reproduce
Possible Root Cause
This issue appears to be caused by a state inconsistency between the
tag-selectcomponent and the@dub/uiComboBox component, combined with improper cache mutation.When a new tag is created, it is displayed correctly in the UI via the ComboBox component
However, the internal state used by the
tag-selectcomponent does not contain the full data of the newly created tagThis creates a mismatch where:
After unselecting and re-selecting:
Additionally:
The
useTagshook mutation logic does not properly update or revalidate all relevant queriesAs a result, the latest tag list is not reliably reflected across:
This leads to stale or partially updated data being used in the component.
🛠 Proposed Fix
Ensure that newly created tags are properly normalized and inserted into state, not just rendered via UI components
Fix the synchronization between:
@dub/uiComboBox datatag-selectstateImprove cache mutation strategy in
useTags:Append newly created tags only to the base query (no search)
For search queries:
Optionally:
Contribution
I have identified the root cause and a potential fix, and would like to work on this issue.