# Mousetrap.js doesn’t properly stop callbacks for events originating from a shadow DOM

**URL:** https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757
**Category:** Development
**Created:** [26 בנובמבר,‏ 2018,‏ 10:10am UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757 "2018-11-26T10:10:05Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![kleinfreund](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kleinfreund](https://meta.discourse.org/u/kleinfreund)
#### Post date: [26 בנובמבר,‏ 2018,‏ 10:10am UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/1 "2018-11-26T10:10:05Z")

</div>

I’m experimenting with shadow DOM in a Discourse plugin I’m writing and noticed that mousetrap.js is not stopping callbacks for events that originate in the shadow DOM. For example, pressing u in an input element triggers the Discourse shortcut for history back navigation; thus, stopping me from filling out any forms.

I’m mainly adding this as a reference for people running into this in the future because it’s unlikely this can be fixed in Discourse without replacing mousetrap.js (except for monkey-patching the file).

- Upstream issue: [Stop events occuring in input fields when using a shadow DOM · Issue #245 · ccampbell/mousetrap · GitHub](https://github.com/ccampbell/mousetrap/issues/245)

- Open pull request (stale, unfortunately): [Don't fire events if you're inside a textfield/input in a shadow DOM by robinsk · Pull Request #254 · ccampbell/mousetrap · GitHub](https://github.com/ccampbell/mousetrap/pull/254)

- Possible fix:

---

<div class="post-metadata">

### Author: ![gerhard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gerhard/32/119479_2.png) [@gerhard](https://meta.discourse.org/u/gerhard)
#### Post date: [26 בנובמבר,‏ 2018,‏ 10:36am UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/2 "2018-11-26T10:36:37Z")

</div>

It would be great if you could get this fixed upstream. That would make our lives a lot easier, because we use yarn for that dependency and we’d like to avoid monkey patching. Please feel free to ping us or create a PR to update our dependency when a new version with the fix has been released.

---

<div class="post-metadata">

### Author: ![kleinfreund](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kleinfreund](https://meta.discourse.org/u/kleinfreund)
#### Post date: [26 בנובמבר,‏ 2018,‏ 11:05am UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/3 "2018-11-26T11:05:43Z")

</div>

I asked whether they want a new pull request because I don’t want to just hijack the existing pull request although it is stale for three years. We’ll see.

---

<div class="post-metadata">

### Author: ![kleinfreund](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kleinfreund](https://meta.discourse.org/u/kleinfreund)
#### Post date: [27 בנובמבר,‏ 2018,‏ 11:18am UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/4 "2018-11-27T11:18:10Z")

</div>

I submitted a pull request upstream: [Shadow DOM: Stop callbacks from inside an open shadow tree by kleinfreund · Pull Request #438 · ccampbell/mousetrap · GitHub](https://github.com/ccampbell/mousetrap/pull/438)

---

<div class="post-metadata">

### Author: ![gerhard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gerhard/32/119479_2.png) [@gerhard](https://meta.discourse.org/u/gerhard)
#### Post date: [27 בנובמבר,‏ 2018,‏ 11:22am UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/5 "2018-11-27T11:22:23Z")

</div>

Oh, I just noticed that we are using a fork of mousetrap because we had to apply a patch that [hasn’t been merged yet](https://github.com/ccampbell/mousetrap/pull/434). 🙈

So, yeah, I guess you could send the pull request to [our fork](https://github.com/discourse/mousetrap) if there’s no reaction in the upstream project in a reasonable timeframe.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [15 בינואר,‏ 2019,‏ 5:01pm UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/8 "2019-01-15T17:01:59Z")

</div>

@kleinfreund FYI, I have merged the upstream changes on our fork of mousetrap should you wish to revisit the PR above.

---

<div class="post-metadata">

### Author: ![kleinfreund](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kleinfreund](https://meta.discourse.org/u/kleinfreund)
#### Post date: [16 בינואר,‏ 2019,‏ 10:39am UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/9 "2019-01-16T10:39:38Z")

</div>

I talked to the maintainer and asked whether they’re willing to review a pull request getting everything into order so that my initial pull request can get merged without failing tests. So I’m currently waiting for the review on those preparations. This would hopefully lay the groundwork for Discourse using the original repository as a depedency instead of maintaining a fork. I’ll get back to you once there is any relevant news.

**Update** : The [pull request](https://github.com/ccampbell/mousetrap/pull/443) was merged and a follow-up pull request to address the issue at hand was submitted:

> <https://github.com/ccampbell/mousetrap/pull/445>
>
> This pull request:
> 
> \- fixes #245.
> \- supersedes #254.
> \- adds tests for open a…nd closed shadow trees.
> \- adds a sixth \`options\` parameter to \`KeyEvent.simulate\`. This was required to re-target the event target with closed shadow trees. The related code contains further explanation.
> 
> \---
> 
> This is a re-submit of #438 which could not be merged due to breaking tests. That’s no longer the case. No existing tests break. The added tests pass.

---

<div class="post-metadata">

### Author: ![kleinfreund](https://avatars.discourse-cdn.com/v4/letter/k/a6a055/32.png) [@kleinfreund](https://meta.discourse.org/u/kleinfreund)
#### Post date: [25 במרץ,‏ 2019,‏ 11:45am UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/10 "2019-03-25T11:45:11Z")

</div>

The issue described in the original post is fixed in Mousetrap.js.

Since the issue that leads to Discourse maintaining a fork of Mousetrap is not addressed, yet, it would be nice if someone could update [discourse/mousetrap](https://github.com/discourse/mousetrap) to include the recent changes to [ccampbell/mousetrap](https://github.com/ccampbell/mousetrap).

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [25 במרץ,‏ 2019,‏ 2:13pm UTC](https://meta.discourse.org/t/mousetrap-js-doesn-t-properly-stop-callbacks-for-events-originating-from-a-shadow-dom/102757/12 "2019-03-25T14:13:47Z")

</div>

Thanks for the nudge @kleinfreund, our fork is updated and the update has been applied to core: [DEV: Update Mousetrap to 1.6.3 · discourse/discourse@4452332 · GitHub](https://github.com/discourse/discourse/commit/44523320771cfff692730d1066f95da2bb2bdb1e)
