onClickOutside with teleport

[mokone91]

Clear and concise description of the problem

Hi!
I have a Modal with onClickOutside, I render select control which uses teleport to show dropdown content(to allow dropdown to overflow modal/any other overflow hidden wrapper) but when i click to dropdown content click outside it triggered as content rendered in body

Is there any solution exept to filter teleports on each onClickOutside usage?

Suggested solution

looking for solution

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[carl1498]

same here, there's currently an ignore option for onClickOutside but it's currently only in the core and is not yet available for the components. Hope we could have it there too.

https://github.com/vueuse/vueuse/releases/tag/v7.6.0
#1205

[jd-solanki]

You can use ignore as we did in the Anu framework here.

In your case, you can assign template ref to the dropdown and add it to ignore list.

I hope this will resolve your issue.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sibbng]

@mokone91 I would suggest you create a wrapping function in this situation. When #2439 is merged, you can also add selector strings in ignore option.

@carl1498 We've added support passing options in OnClickOutside component. But at the moment ignore option only accepts HTMLElement. It may be tricky to pass ignored elements through the component if you are working in SSR environment. #2439 will make this easier by adding selector string support for ignore option.