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.

[Julienng]

Hi,

I've worked a bit on it locally but I feel stuck on this,

For ease of testing, I've created a storybook example directly:

    <TagGroup {...props}>
      <Label>Categories</Label>
      <TagList style={{ display: "flex", gap: 4 }}>
        <DialogTrigger>
          <MyTag>open dialog</MyTag>
          <ModalOverlay
            style={{
              // ...
            }}
          >
            <Modal>
              <Dialog
                style={{
                  // ...
                }}
              >
                my dialog
              </Dialog>
            </Modal>
          </ModalOverlay>
        </DialogTrigger>
        <MyTag>Animal</MyTag>
      </TagList>
    </TagGroup>

I've removed the ternary test for pressProps you pointed, but it doesn't unlock the feature as is.

After some tests, it seems like the usePressResponderContext is only returning the register() inside usePress. I'm not familiar enough with react-aria to understand the correlation between the usePress, PressResponder, useTag in the implementation.

react-spectrum/packages/@react-aria/interactions/src/usePress.ts

Line 183 in ef27de0

} = usePressResponderContext(props);

Do you have any insight on that part?

---

edit:

From my understanding, it seems like the rendered content in the DOM is not a one-one with the React tree when we are using Collections:

It looks like the PressReponder is not a parent of the rendered tag in the DOM and when we are using usePressResponderContext the correct parent is not found. I do think you are using Portal for the Collection rendering, but I'm not quite sure why the PressResponder is not found if this is the case (usage of Portal).

[snowystinger]

That analysis is correct. Hopefully we can use Tooltips to get a little more information. TooltipTrigger already works in RAC collections, seen https://reactspectrum.blob.core.windows.net/reactspectrum/79505ba223825b329cdba614f3c1ff1cd7f89659/storybook/index.html?path=/story/react-aria-components--tag-group-example&providerSwitcher-express=false the last tag is a tooltip trigger.

Note, the Tooltip is actually portaled out of the fake dom (your blue box above) into the real dom.

Trying to add this to the same story. I also commented out our warning about the registered press responder.

<DialogTrigger>
          <MyTag>Gaming</MyTag>
          <Popover
            placement="bottom start"
            style={{
              background: 'Canvas',
              color: 'CanvasText',
              border: '1px solid gray',
              padding: 30,
              zIndex: 5
            }}>
            <Dialog>
              {({close}) => (
                <button onClick={close} style={{marginTop: 10}}>
                  Submit
                </button>
              )}
            </Dialog>
          </Popover>
        </DialogTrigger>

fails, but appears to be due to the Dialog trying to focus a component such as the button. I'm not sure why, the Dialog shouldn't be open.

We can probably solve the PressResponder using something like useIsHidden https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/collections/src/Hidden.tsx#L74 though a bit annoying that we'll have to bring collections into there as a dependency

I'm not sure how to go about solving the issue where the Dialog tries to focus itself or a child. That shouldn't even happen until it opens.

That's as far as I've gotten today.