fix(ui): close context menu when page navs

fix: dev warnings from react about missing keys

Fix #9872

src/main/frontend/handler.cljs

@@ -44,7 +44,7 @@
             [promesa.core :as p]
             [frontend.mobile.core :as mobile]))
 
-(defn set-global-error-notification!
+(defn- set-global-error-notification!
   []
   (set! js/window.onerror
         (fn [message, _source, _lineno, _colno, error]
@@ -197,6 +197,8 @@
 (defn start!
   [render]
   (set-global-error-notification!)
+
+  (set! js/window.onhashchange #(state/hide-custom-context-menu!)) ;; close context menu when page navs
   (register-components-fns!)
   (user-handler/restore-tokens-from-localstorage)
   (state/set-db-restoring! true)

src/main/frontend/ui.cljs

@@ -74,7 +74,8 @@
    [:div.flex.flex-row.justify-between.flex-1.mx-2.mt-2
     (for [color built-in-colors]
       [:a
-       {:title (t (keyword "color" color))
+       {:key (str "key-" color)
+        :title (t (keyword "color" color))
         :on-click #(add-bgcolor-fn color)}
        [:div.heading-bg {:style {:background-color (str "var(--color-" color "-500)")}}]])
     [:a
@@ -1162,15 +1163,16 @@
    [:div.flex.flex-row.justify-between.pb-2.pt-1.px-2.items-center
     [:div.flex.flex-row.justify-between.flex-1.px-1
      (for [i (range 1 7)]
-       (button
-        ""
-        :disabled? (and (some? heading) (= heading i))
-        :icon (str "h-" i)
-        :title (t :heading i)
-        :class "to-heading-button"
-        :on-click #(add-heading-fn i)
-        :intent "link"
-        :small? true))
+       (rum/with-key (button
+                      ""
+                      :disabled? (and (some? heading) (= heading i))
+                      :icon (str "h-" i)
+                      :title (t :heading i)
+                      :class "to-heading-button"
+                      :on-click #(add-heading-fn i)
+                      :intent "link"
+                      :small? true)
+         (str "key-h-" i)))
      (button
       ""
       :icon "h-auto"