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 :onMouseLeave
take 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."]]]])))
@jasonhlogic I haven’t looked to much your example, but the first thing I noticed was the declaration of the render function
you are implementing a form-2 type component
https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md
and the returned fn should have the same params as the container fn
Many thanks for having a look. I'm reading the documentation you linked.