adobe / adobe/react-spectrum

Tag is not working with DialogTrigger

Open
#8,151 8 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.