fix(modal): listen on mousedown instead of click event

[brc-dd]

fixes #145

For accessibility we can also add an event listener on keyup for escape.

[netlify]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	cc3750c
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/63317f922fb2a000093ee082
😎 Deploy Preview	https://deploy-preview-146--sefirot-story.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	cc3750c
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/63317f923b7cf40008c7d47a
😎 Deploy Preview	https://deploy-preview-146--sefirot-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov]

Codecov Report

Base: 35.12% // Head: 35.12% // No change to project coverage 👍

Coverage data is based on head (cc3750c) compared to base (e120ddd).
Patch coverage: 0.00% of modified lines in pull request are covered.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #146   +/-   ##
=======================================
  Coverage   35.12%   35.12%           
=======================================
  Files          95       95           
  Lines        7880     7880           
  Branches      126      126           
=======================================
  Hits         2768     2768           
  Misses       5112     5112           

Impacted Files	Coverage Δ
lib/components/SModal.vue	0.00% <0.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[kiaking]

Thanks a lot!

For accessibility we can also add an event listener on keyup for escape.

Yeah we could, though I think we can do it in other PR. Maybe we need to be careful a bit. If we have for example dropdown menu input on modal, and maybe user might hit esc to intent to close the dropdown menu, instead of the whole modal.

Not sure how other modals out there handle such cases 🤔

[brc-dd]

maybe user might hit esc to intent to close the dropdown menu, instead of the whole modal

Yeah, I was just searching the same thing 😅. Directly adding event listener to document likely won't work.

[kiaking]

Maybe each input must catch esc and prevent the bubble...? Not sure if esc bubbles but... Well anyway, let's just merge this one! 🚀

[cuebit]

@kiaking all element events bubble. Though this is a user land decision, not something Sefirot will know about 👍