reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
Jason 2020-08-12T19:36:03.168900Z

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."]]]])))

2020-08-13T16:26:29.169900Z

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

2020-08-13T16:26:51.170300Z

you are implementing a form-2 type component

2020-08-13T16:27:26.170800Z

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

Jason 2020-08-13T16:42:08.171Z

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