React Aria Components => Button triggering both a Tooltip and a Modal

[charl0tee]

Provide a general summary of the issue here

We have a button triggering both a Tooltip and a Modal. When the modal has a position fixed or absolute it's closing it automatically adding the data-exiting="true" at the same time than the data-entering="true". If I remove the TooltipTrigger around the button, or if the Modal is in position relative, then it works.

🤔 Expected Behavior?

The Modal should remain visible if we haven't clicked on any closing button

😯 Current Behavior

The Modal is opening and closing directly.

💁 Possible Solution

My guess is there are some sort of conflict with the Tooltip and Modal portals, and the is-exiting should probably be on the tooltip and not on the modal ?

🔦 Context

No response

🖥️ Steps to Reproduce

Here is our code for better understanding :

<DialogTrigger>
  <TooltipTrigger>
    <Button>Show a tooltip and open the modal</Button>
    <Tooltip>
      <OverlayArrow>
        <svg width={8} height={8}>
          <path d="M0 0,L4 4,L8 0" />
        </svg>
      </OverlayArrow>
      Click to open the modal
    </Tooltip>
  </TooltipTrigger>
  <ModalOverlay>
    <Modal>
      <Dialog>
        {({ close }) => (
          <form>
            <Heading>Sign up</Heading>
            <TextField autoFocus>
              <Label>First Name:</Label>
              <Input />
            </TextField>
            <TextField>
              <Label>Last Name:</Label>
              <Input />
            </TextField>
            <Button onPress={close}>
              Submit
            </Button>
          </form>
        )}
      </Dialog>
    </Modal>
  </ModalOverlay>
</DialogTrigger>

.react-aria-ModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--visual-viewport-height);
  background: rgba(0 0 0 / .5);
  display: flex;
  align-items: center;
  justify-content: center;

  &[data-entering] {
    animation: fade 200ms;
  }

  &[data-exiting] {
    animation: fade 150ms reverse ease-in;
  }
}

Version

react-aria-components => 1.0.0-beta.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[clemensheithecker]

Hello, we've recently upgraded to React Aria Components version 1.0.0-rc.0 and have noticed that several of our modals are malfunctioning, which we believe is directly related to this issue. Setting the modal dialog's position to relative as suggested by @charl0tee does not solve the issue for us unfortunately.

@devongovett Could you provide any updates on the resolution of this issue, or suggest any temporary workarounds we might employ in the meantime? Thank you! 🙌

[charl0tee]

@clemensheithecker FYI, in our case a workaround is to change the Modal to a controlled Modal, so we don't need to import the DialogTrigger anymore (which was the one causing issues when added around a TooltipTrigger)

[snowystinger]

Assuming I've understood correctly that the Dialog is not showing up at all. This should be fixed by https://github.com/adobe/react-spectrum/pull/5526 As seen here: https://codesandbox.io/p/sandbox/stoic-perlman-dk6qlp?file=%2Fsrc%2FApp.js

I did notice the close button inside the modal isn't working. Not sure why yet, so would like to leave this Issue open for the time being.