[BUG] - ariaShouldCloseOnInteractOutside behaves incorrectly when a modal is opened through a popover.

[rettimo]

NextUI Version

2.4.8

Describe the bug

Popover with modal window and dropdown do not work correctly

2024-10-02.17.45.52.mov

Upon investigating the ariaShouldCloseOnInteractOutside method, I found that state.close(); is called correctly when there is only one open popup, which works as expected. However, the return !trigger || !trigger.contains(element); logic does not function properly because the dialog is not contained within the trigger. This causes a positive result for closing the overlay. While this works fine in simple cases, it fails when dealing with different nesting levels, especially with modals.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Use this example to reproduce the error.

const Test = () => {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();

  return (
    <Popover>
      <PopoverTrigger>
        <Button>Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <Button onPress={onOpen}>Open modal</Button>
        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
          <ModalContent>
            <ModalHeader>Title</ModalHeader>
            <ModalBody>
              <Dropdown>
                <DropdownTrigger>
                  <Button>Open Dropdown</Button>
                </DropdownTrigger>
                <DropdownMenu>
                  <DropdownItem value="1">Item 1</DropdownItem>
                  <DropdownItem value="2">Item 2</DropdownItem>
                  <DropdownItem value="3">Item 3</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </ModalBody>
          </ModalContent>
        </Modal>
      </PopoverContent>
    </Popover>
  );
};

Expected behavior

We need to come up with a more reliable method to determine when to close the overlay. The current logic in ariaShouldCloseOnInteractOutside clearly doesn't work in all scenarios, particularly when handling complex component nesting.

Screenshots or Videos

No response

Operating System Version

MacOS

Browser

Chrome

[linear]

ENG-1424 [BUG] - ariaShouldCloseOnInteractOutside behaves incorrectly when a modal is opened through a popover.