Open
Description
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