Is your feature request related to a problem? Please describe.
I'm encountering an issue with custom popups within a modal window. When I open a popup inside the modal and click on it, the modal unexpectedly closes due to an unregistered external click event being triggered.
Upon reviewing the modal window's source code, I discovered a method that allows for manual control over the modal's closing behavior based on the clicked element. This method, shouldCloseOnInteractOutside, can be passed to the Modal component. However, it's not being utilized in useModal, specifically within useAriaModalOverlay.
Additionally, there is no clear guidance on how to handle situations where certain clicks, such as those on specific elements, should be exempt from triggering the modal's closing method. This lack of instruction makes it difficult to properly register clicks that should not cause the modal to close.
Describe the solution you'd like
As a developer, I should have access to all the necessary tools to register or track clicks on elements that are not directly part of the modal window. This would enable me to write code that allows me to decide when the modal window should close and when it shouldn't, based on the specific interactions within the modal environment. Unfortunately, there's no straightforward way to achieve this with the current implementation.
Describe alternatives you've considered
The only alternative at the moment is to pass the isDismissible={false} flag when displaying a custom popup. While this approach achieves the desired behavior, it introduces several issues, primarily due to the need for managing additional state.
linear[bot]
commented
1 month ago
Is your feature request related to a problem? Please describe.
I'm encountering an issue with custom popups within a modal window. When I open a popup inside the modal and click on it, the modal unexpectedly closes due to an unregistered external click event being triggered.
Upon reviewing the modal window's source code, I discovered a method that allows for manual control over the modal's closing behavior based on the clicked element. This method,
shouldCloseOnInteractOutside, can be passed to the Modal component. However, it's not being utilized inuseModal, specifically withinuseAriaModalOverlay.Additionally, there is no clear guidance on how to handle situations where certain clicks, such as those on specific elements, should be exempt from triggering the modal's closing method. This lack of instruction makes it difficult to properly register clicks that should not cause the modal to close.
Describe the solution you'd like
As a developer, I should have access to all the necessary tools to register or track clicks on elements that are not directly part of the modal window. This would enable me to write code that allows me to decide when the modal window should close and when it shouldn't, based on the specific interactions within the modal environment. Unfortunately, there's no straightforward way to achieve this with the current implementation.
Describe alternatives you've considered
The only alternative at the moment is to pass the isDismissible={false} flag when displaying a custom popup. While this approach achieves the desired behavior, it introduces several issues, primarily due to the need for managing additional state.
Screenshots or Videos
https://github.com/user-attachments/assets/2daca342-1bc0-48cb-b3a4-8bc5d87bb239