Way to `preventDefault` on `Browser.Events` needed

[ChristophP]

The issue
I am building an editor using Elm, so I am handling all sorts of keyboard input. I just learned that the subscriptions in Browser.Events unfortunately don't provide the possibilty to prevendDefault the browser behavior. This is unfortunate because sometime I need the tab key to do something different than switch to the next tabIndex element or intercept key strokes on inputs.
Possible workaround

1. Using Html.Events on the outermost <div>. Unfortunately this won't work if the focus gets somehow changed to the body.
2. Ports: Works but needs JavaScript code and makes one leave the safe Elm haven.

[ChristophP]

related #77

[r-k-b]

We're also running into this issue, on a large-ish app that's replacing a desktop app. Many of the existing shortcuts that users have muscle memory of, collide with browser shortcuts such as Alt + F.

related unanswered SO question: how to use prevent default on Elm Browser.Event.onKeyDown

[atlewee]

I faced the same issue today but found a workaround that works like I want:
Add Html.Events.preventDefaultOn "keydown" yourDecoder to the outermost div
To be able to pick up all keydown you must also add Html.Attributes.tabIndex 0 to this div.
Now in your decoder you can check the input before the key is sent to the browser. If you detect a keycombination your decoder should give back ( KeyCombinationMsg, True ) so that f.eks. any textbox in parts of your application with focus does not receive any characters.
If no known key-combination is found your decoder should fail, letting the focused textInput get that event :)

[atlewee]

Update:
There was a slight problem with the proposed workaround. If an input on the page gets removed/destroyed focus is lost to document.body and the outermost div will not pick up keypresses before clicking somewhere in the application.
Was hoping to have a pure elm workaround, but needed to add this to index.html to get it working.
( add focus to the outermost div if focus is lost )

document.addEventListener("focusout", (e) => {
  if (e.relatedTarget == null) {
    document.getElementById("layout").focus()
  }
})

[bburdette]

I made a package for dealing with this issue, at least for my use case:

https://package.elm-lang.org/packages/bburdette/windowkeys/latest/

[lydell]

Here’s the workaround I use, in case it’s useful to someone else:

/**
 * This custom element behaves just like a regular element, except that
 * event listeners added to it are instead added on `window`. This allows
 * you to add event listeners to `window` in Elm for events that `Browser.Events`
 * doesn’t support, or doesn’t support well enough.
 *
 * Render this “dummy” element somewhere and attach event listeners to it.
 *
 * Example usage:
 *
 * Html.node "window-events"
 *     [ Html.Events.preventDefaultOn "keydown" myHandler ]
 *     []
 *
 * The above behaves like `Browser.Events.onKeyDown` except it lets you
 * do `event.preventDefault()`.
 */
customElements.define(
  "window-events",
  class extends HTMLElement {
    addEventListener(...args) {
      return window.addEventListener(...args);
    }

    removeEventListener(...args) {
      return window.removeEventListener(...args);
    }
  },
);