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.
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.
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 thatstate.close();
is called correctly when there is only one open popup, which works as expected. However, thereturn !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.
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