fix: prevent modal closing on inner clicks

[cnaples79]

Summary

• only treat clicks outside the dialog bounds as light dismiss
• avoid closing modals when clicking padding or title areas

Rationale

• addresses Dialogs can be closed by clicking within some areas of the dialog itself #667: clicking inside modal padding/title closed the dialog

Changes

• app/app.vue: check click coordinates against dialog bounding box before closing

Test Plan

• All CI passing on fork

Fixes #667

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 2, 2026 11:12am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 2, 2026 11:12am
npmx-lunaria	Ignored		Feb 2, 2026 11:12am

[knowler]

So, the particular code that is causing this is a hack to add light dismiss to Safari (see #522 for context). I suggest that we feature check closedby=any which does the light dismiss for us for free and then keep the hack for cases where closedby=any isn’t supported (Safari + old Chrome/Firefox).

You can feature check closedby=any using:

typeof HTMLDialogElement !== "undefined" &&
typeof HTMLDialogElement.prototype === "object" &&
"closedBy" in HTMLDialogElement.prototype

Feel free to simply that to the final condition if this code will only run in a browser.

I said this in #522, but I do think it could be worth removing the hack entirely if it’s causing issues or not working correctly. Users can already dismiss the modal using the Escape key or with the dismiss button; light dismiss is a progressive enhancement. This is likely a better route than keeping it as light dismiss is not easy to implement with dialog otherwise.

[danielroe]

yes, I think that's a better fix - thank you 🙏