reitit.frontend - HTML5Router does not prevent anchor click as should on matching route

Question

• if we choose HTML5Router or Fragment router - in both cases reitit should prevent default anchor click behavior
• however, ignore-anchor-click function here is never called
  • https://github.com/metosin/reitit/blob/0.5.18/modules/reitit-frontend/src/reitit/frontend/history.cljs#L109
• because a few lines below goog.events/listen is missing true 4th arg - so browser first captures click and never gets to document.click
  • https://github.com/metosin/reitit/blob/0.5.18/modules/reitit-frontend/src/reitit/frontend/history.cljs#L124
• is

(gevents/listen js/document goog.events.EventType.CLICK ignore-anchor-click))

• should be - then all works

(gevents/listen js/document goog.events.EventType.CLICK ignore-anchor-click true))

question

• is there a way to change this behavior without PR or forking?

Answer 1

solution

• copy function code from reitit.frontent.history
• using history ref unsubscribe and resubscribe

(let [history (Yzma.frontend.easy/start! _ _ _)]
  (goog.events/unlistenByKey (:click-listen-key history))
  (goog.events/listen
   js/document
   goog.events.EventType.CLICK
   (fn [event]
     (when-let [element (Yzma.frontend.history/closest-by-tag
                         (Yzma.frontend.history/event-target event) "a")]
       (let [uri (.parse goog.Uri (.-href element))]
         (when (Yzma.frontend.history/ignore-anchor-click?
                (.-router history) event element uri)
           (.preventDefault event)
           (let [path (str (.getPath uri)
                           (when (.hasQuery uri)
                             (str "?" (.getQuery uri)))
                           (when (.hasFragment uri)
                             (str "#" (.getFragment uri))))]
             (.pushState js/window.history nil "" path)
             (Yzma.frontend.history/-on-navigate history path)))))) true))