Skip to content

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

Open
@charl0tee

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions