Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] - Can't close modal when the autocomplete popover is open #3483

Open
lmalvasia opened this issue Jul 16, 2024 · 6 comments
Open

[BUG] - Can't close modal when the autocomplete popover is open #3483

lmalvasia opened this issue Jul 16, 2024 · 6 comments
Labels
📦 Scope : Components Related to the components ✨ Type: Enhancement New enhancement on existing codebase

Comments

@lmalvasia
Copy link

lmalvasia commented Jul 16, 2024

NextUI Version

2.4.2

Describe the bug

When we have an autocomplete component inside a modal, and we try to close the modal when the popover is open, we have to click twice on the close button to close it. This is because the first click is closing the popover and the second click is closing the modal. However, as you can see in the codesandbox, the button to close a modal has the click animation when we do the first click.

Your Example Website or App

https://codesandbox.io/p/devbox/determined-violet-smpxr5

Steps to Reproduce the Bug or Issue

  • Add an autocomplete component inside a modal
  • Open the autocomplete
  • Clicks on the "X" icon of the modal to close it. You can see the click animation over the button.
  • The modal is not closed, but the autocomplete popover is closed.

Expected behavior

  • Both components should be closed

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

Copy link

linear bot commented Jul 16, 2024

@wingkwong
Copy link
Member

  1. in your sandbox, i didn't see there is a modal. please double check.
  2. i think i fixed a similar issue before. can you try the latest canary version 0.0.0-canary-20240712184424 to see if it is still reproducible?

@lmalvasia
Copy link
Author

lmalvasia commented Jul 16, 2024

  1. in your sandbox, i didn't see there is a modal. please double check.
  2. i think i fixed a similar issue before. can you try the latest canary version 0.0.0-canary-20240712184424 to see if it is still reproducible?

Sorry for that, I copied and pasted the wrong link. I updated the link to the correct sandbox (https://codesandbox.io/p/devbox/determined-violet-smpxr5?file=/package.json:15,32)
Regarding the version, I installed that canary version and the problem persist

@wingkwong wingkwong added 🐛 Type: Bug Something isn't working 📦 Scope : Components Related to the components ✨ Type: Enhancement New enhancement on existing codebase and removed 🐛 Type: Bug Something isn't working labels Jul 17, 2024
@wingkwong
Copy link
Member

Thanks for the sandbox. To supplement a bit. Currently when an autocomplete is open, clicking anywhere outside it will just close it. I think we may add an extra logic to check if the click is a close button and close the corresponding component. However, this may be a complex implementation since we need to figure out which corresponding overlay we need to close and ariaShouldCloseOnInteractOutside is triggered recursively.

@awesome-pro
Copy link
Contributor

@lmalvasia @wingkwong I think closing the modal on click outside can be problematic in scenarios of modal forms having autocomplete or select components. In such cases, if user click outside the modal(with autocomplete open) the whole form will be closed.

@wingkwong
Copy link
Member

@abhinandan-verma i think he means only clicking the close button. In this case, it closes the model intentionally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 Scope : Components Related to the components ✨ Type: Enhancement New enhancement on existing codebase
Projects
None yet
Development

No branches or pull requests

3 participants