Don't trigger keyboard event handlers when no one is listening

Author: hojberg

src/UI/ModalOverlay.elm

@@ -1,17 +1,35 @@
 module UI.ModalOverlay exposing (modalOverlay)
 
 import Html exposing (Html, node)
+import Html.Attributes exposing (attribute)
 import Html.Events exposing (on)
 import Json.Decode as Decode
-import Maybe.Extra as MaybeE
 
 
 modalOverlay : Maybe msg -> Maybe msg -> Html msg -> Html msg
 modalOverlay onEscape onEnter content =
     let
+        escHandler =
+            onEscape
+                |> Maybe.map
+                    (\onEsc ->
+                        [ on "escape" (Decode.succeed onEsc)
+                        , attribute "has-escape-handler" "true"
+                        ]
+                    )
+                |> Maybe.withDefault []
+
+        enterHandler =
+            onEnter
+                |> Maybe.map
+                    (\onEnt ->
+                        [ on "enter" (Decode.succeed onEnt)
+                        , attribute "has-enter-handler" "true"
+                        ]
+                    )
+                |> Maybe.withDefault []
+
         attrs =
-            [ onEscape |> Maybe.map (\onEsc -> on "escape" (Decode.succeed onEsc))
-            , onEnter |> Maybe.map (\onEnt -> on "enter" (Decode.succeed onEnt))
-            ]
+            escHandler ++ enterHandler
     in
-    node "modal-overlay" (MaybeE.values attrs) [ content ]
+    node "modal-overlay" attrs [ content ]

src/UI/ModalOverlay.js

@@ -26,18 +26,14 @@ class ModalOverlay extends HTMLElement {
         return;
       }
 
-      if (ev.key === "Escape") {
+      if (this.hasAttribute("has-esc-handler") && ev.key === "Escape") {
         ev.preventDefault();
         ev.stopPropagation();
 
         this.dispatchEvent(new CustomEvent("escape"));
       }
 
-      debugger;
-      console.log('---');
-      console.log(this.events);
-
-      if (ev.key === "Enter") {
+      if (this.hasAttribute("has-enter-handler") && ev.key === "Enter") {
         ev.preventDefault();
         ev.stopPropagation();