Modal: fix issue with click outside to dismiss

[shleewhite]

📌 Summary

If merged this PR would update Modal to not use ember-focus-trap to dismiss the Modal on click outside and instead use our own click event.

It also fixes an issue where the scroll bar would get added back if try to close the modal when isDismissDisabled=true.

🛠️ Detailed description

This is necessary because the ember-focus-trap's clickOutSideDeactivates only ever runs once. If a consumer conditionally disables the ability to dismiss the modal, the user may not be able to click outside to deactivate it.

Steps to reproduce:

1. Navigate to: https://hds-showcase.vercel.app/components/modal#demo
2. Click "Open non-dismissable modal"
3. Click outside the modal after it opens, notice it doesn't close and you are able to scroll the page behind the modal.
4. Click "reset isDismissDisabled"
5. Click outside the modal, notice it doesnt close.
6. Click "confirm"/"Cancel"/"close", notice the modal does close.

🔗 External links

Jira ticket: HDS-3972

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	May 6, 2025 5:24pm
hds-website	✅ Ready (Inspect)	Visit Preview	May 6, 2025 5:24pm

[didoo]

It's quite a complex PR with potential side-effects. Maybe @RobbieTheWagner could review it too?

[zamoore]

Have you considered moving the logic out of the modal and into a global on-click-outside modifier? Might be a useful modifier to ship with HDS.

[RobbieTheWagner]

Have you considered moving the logic out of the modal and into a global on-click-outside modifier? Might be a useful modifier to ship with HDS.

I like this idea. FWIW, there is a well maintained addon for this, if we want to just use that https://github.com/lifeart/ember-click-outside-modifier

[shleewhite]

Have you considered moving the logic out of the modal and into a global on-click-outside modifier? Might be a useful modifier to ship with HDS.

I like this idea. FWIW, there is a well maintained addon for this, if we want to just use that https://github.com/lifeart/ember-click-outside-modifier

@RobbieTheWagner @zamoore This is definitely an interesting idea... I think for now because there really is only one use so far I'm leaning towards leaving the one off implementation. We usually rely on ember-focus-trap for this functionality, so I don't want to add another dependency.

[dchyun]

LGTM! Only suggestion, should we add a test case for the document click in the existing isDIsmissDisabled test?