This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-08-12
Channels
- # announcements (5)
- # babashka (1)
- # beginners (193)
- # calva (79)
- # cider (18)
- # clara (4)
- # clojure (38)
- # clojure-europe (12)
- # clojure-france (8)
- # clojure-nl (12)
- # clojure-sweden (1)
- # clojure-uk (50)
- # clojurescript (37)
- # conjure (30)
- # cursive (3)
- # data-science (2)
- # datalog (7)
- # datomic (12)
- # events (2)
- # expound (3)
- # figwheel-main (1)
- # fulcro (45)
- # graalvm (1)
- # jobs (1)
- # jobs-discuss (11)
- # luminus (1)
- # malli (5)
- # off-topic (32)
- # reagent (6)
- # reitit (32)
- # shadow-cljs (25)
- # spacemacs (2)
- # sql (22)
- # vim (6)
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."]]]])))
@U010M1C9CTS 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