Merge pull request metosin#258 from fraxu/shadow-dom-fix

Support html5 links inside Shadow DOM

modules/reitit-frontend/src/reitit/frontend/history.cljs

@@ -59,6 +59,14 @@
           el
           (recur (.-parentNode el)))))))
 
+(defn- event-target [event]
+  "Read event's target from composed path to get shadow dom working,
+   fallback to target property if not available"
+  (let [original-event (.getBrowserEvent event)]
+    (if (exists? (.-composedPath original-event))
+      (first (.composedPath original-event))
+      (.-target event))))
+
 (defrecord Html5History [on-navigate router listen-key click-listen-key]
   History
   (-init [this]
@@ -76,7 +84,7 @@
           (fn ignore-anchor-click
             [e]
             ;; Returns the next matching anchestor of event target
-            (when-let [el (closest-by-tag (.-target e) "a")]
+            (when-let [el (closest-by-tag (event-target e) "a")]
               (let [uri (.parse Uri (.-href el))]
                 (when (and (or (and (not (.hasScheme uri)) (not (.hasDomain uri)))
                                (= current-domain (.getDomain uri)))

test/cljs/reitit/frontend/history_test.cljs

@@ -127,3 +127,41 @@
                                             (done))
                                       (do (is false "extra event")))))
                                 {:use-fragment false})]))))
+
+(deftest html5-history-link-click-test
+  (when browser
+    (gevents/removeAll js/window goog.events.EventType.POPSTATE)
+    (gevents/removeAll js/window goog.events.EventType.HASHCHANGE)
+    (gevents/removeAll js/document goog.events.EventType.CLICK)
+
+    ;; Will fail with "Some of your tests did a full page reload!"
+    ;; if link events are not handled
+
+    (async done
+      (let [clicks (atom nil)
+            click-next (fn []
+                         (let [target (first @clicks)]
+                           (swap! clicks rest)
+                           (.click target)))
+            shadow-element (js/document.createElement "DIV")
+            shadow-root (.attachShadow shadow-element #js {:mode "open"})
+            history (rfh/start! router (fn [_ history]
+                                         (when @clicks
+                                           (if (seq @clicks)
+                                             (click-next)
+                                             (do
+                                               (rfh/stop! history)
+                                               (done)))))
+                                {:use-fragment false})
+            create-link #(doto
+                           (js/document.createElement "A")
+                           (.setAttribute "href" (rfh/href history ::foo)))
+            document-link (create-link)
+            shadow-link (create-link)]
+        (.appendChild js/document.body document-link)
+
+        (.appendChild js/document.body shadow-element)
+        (.appendChild shadow-root shadow-link)
+
+        (reset! clicks [document-link shadow-link])
+        (click-next)))))