Tag is not working with DialogTrigger
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
Hi,
I'm trying to find a good implementation of a modal on top of a `Tag` / `TagGroup` components.
I have a list of tags that can be:
- removed
- added
- edited
In the past, I used a custom Tag implementation (called `Chip` on our end) to handle this part, but the navigation control implemented by Tag/TagGroup is not easy to handle manually.
We are using RAC as our baseline component library and trying to find a fit for the Tag / TagGroup for that kind of use case.
Remove / Add is working great, the navigation inside TagGroup is wonderful, but I can't find a way to make Dialog / Modal work upon Tag for the editable part.
I'm open to discussing alternative patterns for this kind of use case if you have any ideas / recommendation
### 🤔 Expected Behavior?
I expect `Tag` to be a valid trigger element for DialogTrigger
### 😯 Current Behavior
The Modal is not working for Tag.
I extracted my tests here:
https://codesandbox.io/p/devbox/7x7mfz
As you can see, even `controlled` state for the modal has a weird behavior (modal is not closable, button are hidden from `context`)
### 💁 Possible Solution
I would love to enable this use case:
```jsx
my tag
...
```
### 🔦 Context
To explain further on my use case:
We have a list of badges associated with an asset.
A badge can be manual or calculated. Manual badge are editable by the user based on a selection of values configured for this badge.
Badges are represented as Chip / Tag is the UI.
### 🖥️ Steps to Reproduce
All my tests are here:
https://codesandbox.io/p/devbox/7x7mfz
- __first card__: naive impl of tag with Dialog
- __second card__: not that smart hack (controlled modal)
- __third card__: control test (naive chip impl)
### Version
1.8.0
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
MacOS 15.3.2
### 🧢 Your Company/Team
Semarchy
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start by reproducing the three cases in the linked CodeSandbox, focusing on Tag, TagGroup, DialogTrigger, and controlled modal behavior. Trace how the trigger and modal contexts interact, then verify that a Tag can open and close the dialog while preserving TagGroup navigation and dialog controls.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100