Tag is not working with DialogTrigger

[Julienng]

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:

<TagList>
  <DialogTrigger>
    <Tag>my tag</Tag>
    <Modal>
      <Dialog>
      ...
      </Dialog>
    </Modal>
  </DialogTrigger>
</TagList>

🔦 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

[snowystinger]

Can you share more about your use case for this? Why/when is a Tag a DialogTrigger?

[Julienng]

So the UI looks something like this:

Users can: Add, Update and Delete Badge / Tags

The click on a Badge opens a modal with a "quick update" form

The click on a Tag opens a Preview Dialog, so the user can see some additional information.

Both of these depend on the "Tag" being "triggerable" by DialogTrigger

[snowystinger]

Talked about this in our weekly grooming. We think it's ok for Tags to support this interaction. Though we'd caution people against combining selection with dialog triggers, which is what it looks like you're doing.

The reason it's not working is because when the tag group is not selectable, then props from usePress are filtered out. So we'd need to allow those to still end up on the target and instead halt other interactions above that.

Here's where that is happening

react-spectrum/packages/@react-aria/selection/src/useSelectableItem.ts

Line 385 in ef27de0

allowsSelection || hasPrimaryAction || shouldUseVirtualFocus ? pressProps : {},

The first step would be to confirm the thesis here if you'd like to help out.

[Julienng]

Hi, that's a wonderful news on our end! Thanks for looking into it.

Yeah we are in a case where the tag group is not selectable.

I would like to help on this but I've just started my holiday trip.
I'll come back to you after that (Mai 19-23)

[Julienng]

Do you think an alternative where DialogTrigger accept a trigger ref make sense like (like the tooltip) ?

May it be easier ?

[snowystinger]

The interaction combinations and interactions themselves would still be needed, otherwise you wouldn't know that a Tag had been clicked. I don't think we need to worry about a trigger ref pattern right now.