fix(Drawer/Modal/Popover/Slideover): prevent unexpected close on touch when interacting with other overlays

[quentingiraud-ugo]

🔗 Linked issue

Resolves #5694

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR fixes an issue where the Modal component closes unexpectedly on touch devices after interacting with other overlay elements (like Toast).

Problem

On touch devices, when a user:

1. Opens a modal
2. Triggers a toast notification from inside the modal
3. Taps the same button again after the toast appears/disappears

The modal closes unexpectedly as if the user tapped outside the modal overlay.

Solution

Added a pointerDownOutside handler that prevents the modal from closing when:

• The event target is no longer in the DOM (e.g., toast was dismissed)
• The event target is part of another dismissable layer (e.g., toast, popover)

This ensures the modal only closes on intentional interactions outside its content.

Testing

Added a "Modal with toast" example in the playground (/components/modal) to reproduce and test this behavior on touch devices.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5695

commit: 06e40f8

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a new pointerDownOutside utility and exports a PointerDownOutsideOptions interface with an optional scrollable flag. The utility guards overlay dismissal for pointer-down events when the event target is disconnected or when clicks land on scrollbars (if scrollable is true). Components Modal, Drawer, Popover, and Slideover import and wire pointerDownOutside into their content event handlers. Also adds a Nuxt playground modal example that invokes useToast() and a showToast handler to demonstrate toast interactions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately describes the main change: fixing unexpected modal closure on touch devices when interacting with overlays.
Description check	✅ Passed	The PR description is comprehensive and clearly related to the changeset, explaining the problem, solution, and testing approach.
Linked Issues check	✅ Passed	The code changes comprehensively address all objectives: prevents modal closure when touch targets are disconnected from DOM or belong to other dismissable layers [#5694].
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the touch handling issue: utility function for pointer handling, updates to overlay components (Modal, Drawer, Popover, Slideover), and a playground example.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[benjamincanac]

Thanks for the fix and sorry for the delay!

I simplified it a bit:

• Removed the [data-dismissable-layer] check since Reka UI handles this internally already
• Moved the logic to a shared pointerDownOutside utility so we can use it in Slideover, Popover and Drawer too

Let me know what you think 😊

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/runtime/utils/overlay.ts`:
- Around line 22-30: The connectivity check using document.body.contains(target)
can misreport shadow-DOM nodes as disconnected; update the early-return
condition around e.detail.originalEvent and the local target variable so it uses
Node.isConnected (i.e., check target.isConnected) instead of
document.body.contains(target) to decide whether to e.preventDefault() and
return — locate the block that reads const originalEvent =
e.detail.originalEvent and const target = originalEvent.target as HTMLElement
and replace the contains check with a guard that verifies target exists and
target.isConnected before preventing the overlay close.

🧹 Nitpick comments (1)

src/runtime/utils/overlay.ts (1)

33-35: Track the FIXME for Mac OS scrollbar handling.

There’s an explicit FIXME for Mac OS behavior; please track it with an issue or follow-up task so it doesn’t get lost.