nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.8k stars 1.49k forks source link

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

Open rettimo opened 3 weeks ago

rettimo commented 3 weeks ago

NextUI Version

2.4.8

Describe the bug

Popover with modal window and dropdown do not work correctly

https://github.com/user-attachments/assets/de617755-5584-4174-ab4d-8cf79e98deaa

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[bot] commented 3 weeks ago

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