Fork me on GitHub
#reagent
<
2020-08-12
>
jasonhlogic19:08:03

Hello. I have an issue which has me stumped. I'm pretty new to front end work and am trying to translate a minimal https://material-ui.com/components/popover/#mouse-over-interaction into cljs. My translation renders, and events fire but :onMouseEnter and :onMouseLeavetake turns firing while the mouse is motionless over the anchor element, so the popup never shows (or at least not for long). I think I must be misunderstanding something. Any help appreciated.

(defn hover-sample [{:keys [^js classes]}]
  (let [local-state (reagent/atom {:hover nil})]
    (fn []
      [:> Paper {:class [(.-paper classes) (.-fixedHeight classes)]}
       [:div
        [:> Typography {:id "hover-anchor"
                        :aria-owns #(if (nil? (:hover @local-state))
                                      "mouse-over-popover"
                                      js/undefined)
                        :aria-haspopup "true"
                        :onMouseEnter #(prn (swap! local-state assoc :hover
                                                   (-> %
                                                       .-target
                                                       .-id)))
                        :onMouseLeave #(prn (swap! local-state assoc :hover
                                                   nil))}
         "Hover with a popover"]
        [:> Popover {:id "mouse-over-popover"
                     :className (.-popover classes)
                     :classes {:paper (.-paper classes)}
                     :open (not= nil (:hover @local-state))
                     :anchorEl #(if (nil? (:hover @local-state))
                                  nil
                                  (.getElementById js/document
                                                   "hover-anchor"))
                     :anchorOrigin {:vertical "bottom"
                                    :horizontal "left"}
                     :transformOrigin {:vertical "top"
                                       :horizontal "left"}
                     :onClose #(swap! local-state assoc :hover nil)
                     :disableRestoreFocus true
                     :disableEnforceFocus true
                     :disableAutoFocus true}
         [:> Typography "I use Popover."]]]])))

wvelezva16:08:29

@ I haven’t looked to much your example, but the first thing I noticed was the declaration of the render function

wvelezva16:08:51

you are implementing a form-2 type component

wvelezva16:08:26

and the returned fn should have the same params as the container fn

jasonhlogic16:08:08

Many thanks for having a look. I'm reading the documentation you linked.