Fork me on GitHub
#reagent
<
2017-03-14
>
borkdude11:03:13

I have an issue with Reagent and render-to-static-markup + a jquery plugin. The component renders an input element which will be used by selectize. Selectize has a custom render function that uses render-to-static-markup. React gives the following warning: Warning: Exception thrown by hook while handling onSetChildren: Invariant Violation: Item must have been set We initialize selectize on component-did-mount:

(reagent/create-class
     {:component-did-mount (fn [this]
                             (selectize! this))
      :component-will-unmount #(.destroy (get-selectize))
      :render (fn []
                [:input {:id id}])})

borkdude11:03:11

I think it has something to do with batching. When I write (js/setTimeout #(selectize! this) 100) it doesn’t give the warning

borkdude11:03:54

(already upgraded to Reagent 0.6.1)

borkdude11:03:21

Also, when I don’t use render-to-static-markup but manually craft the HTML it works fine

borkdude11:03:39

Can hiccup be used in ClojureScript? hiccups seems to be a little unmaintained?

borkdude11:03:24

Also I get error messages when requiring the html macro from hiccups

gklijs12:03:59

not sure, since I hardly know myself why it’s working, but maybe you need to add the function to get the dom nod, (r/dom-node this). this works to add a touch event handler to a canvas: ` :component-did-mount (fn [this] ;; Use a go block so that the canvas exists before we attach the sketch ;; to it. (Needed on initial render; not on re-render.) (a/go (let [canvas-size (get-canvas-size) sketch-args* {:host "reframe-canvas" :size (first canvas-size) :draw #(draw-function (second canvas-size))}] (reset! saved-sketch-atom (apply q/sketch (apply concat sketch-args*)))) (let [mc (new js/Hammer.Manager (r/dom-node this))] (js-invoke mc "add" (new js/Hammer.Pan #js{"direction" js/Hammer.DIRECTION_ALL "threshold" 0})) (js-invoke mc "on" "pan" #(let [direction (.-direction %)] (cond (= direction 8) (dispatch [:change-direction [0 -1]]) (= direction 16) (dispatch [:change-direction [0 1]]) (= direction 4) (dispatch [:change-direction [1 0]]) (= direction 2) (dispatch [:change-direction [-1 0]]) ))) (reset! hammer-manager mc))))`

borkdude14:03:36

yeah, that wasn’t the issue. I think it has something to do with https://github.com/facebook/react/issues/8487