Reagent and Semantic-UI

[Fernando Abrao]

Hello All,

I´m trying to use Reagent with Sematic-UI Modal but I´m getting error in dialog button event. Code below.

The open dialog is ok, but When I click to button "OK - Fechar" it´s getting the error:
"Uncaught Error: Invariant Violation: findComponentRoot(..., .6.0.0.2.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``."
What I´ve missing?

<code>
(def jquery (js* "$"))

(defn mostra-dialogo [id]
(let [dialogo (jquery id)]
(.modal dialogo "show")))

(defn esconde-dialogo [id]
(let [dialogo (jquery id)]
(.modal dialogo "hide")))

(defn dialogo []
[:div {:class "ui united small modal" :id "dialogo"}
[:div {:class "header"} "MODAL"]
[:div {:class "content"} "AHAHAHAHHA"]
[:div {:class "actions"}
[:button {:class "ui blue labeled button" :id "btSair"
:on-click (fn [e] (js/console.log "NO !!!"))} "OK - Fechar"]
]])

(defn home-page []
[:div
[dialogo]
[:div {:class "ui primary button" :id "btAbrir"
:on-click (fn [e] (mostra-dialogo "#dialogo"))} "Modal"]])

(defn current-page []
[:div [(session/get :current-page)]])

;; -------------------------
;; Routes

(secretary/defroute "/" []
(session/put! :current-page #'home-page))

;; -------------------------
;; Initialize app

(defn mount-root []
(reagent/render [current-page] (.getElementById js/document "app")))

(defn init! []
(accountant/configure-navigation!
{:nav-handler
(fn [path]
(secretary/dispatch! path))
:path-exists?
(fn [path]
(secretary/locate-route path))})
(accountant/dispatch-current!)
(mount-root))
</code>

[Linus Ericsson]

You have to make sure React doesn't touch the elements after Modal dialog codes it job.

Use the similar technique as is shown in the highcharts cookbook entry:

https://github.com/reagent-project/reagent-cookbook/blob/master/recipes/highcharts/README.md

(You may consider if it's a good idea to have other tools ready to rebuild the DOM, instead of generating the nescessary codw through reagent directly, but it's doable, and sometimes a good way forward).

/Linus

--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to the Google Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email to clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

[Torsten Uhlmann]

I'm afraid I don't have a straight forward answer to your question.

When I ran into this React error it usually meant I forgot something in my markup that the browser thought it should fix- the browser changed the DOM and React didn't know about.

Try looking at the rendered dom in the browser and see if it is different from what you specified in the component. Something like a wrong nesting of elements or some element the browser added by itself, etc.

I did a few Material-UI experiements (https://github.com/tuhlmann/reagent-material) a while ago, maybe something int the repo can help. In the end I decided to go with Bootstrap 4...

Hope that helps,
Torsten.

[Fernando Abrao]

Now I´m confused :) . Something that will be simple, is not so.
So Bootstrap 4 with Reagent do you think it´s easy than what I´m doing?

[Torsten Uhlmann]

Most of the time these problems come from something very simple. Something that makes you bang your head against the table after you found it. At least that's the case with me :)

Anyway, using bootstrap 4 was just an example. I decided not to go with material-ui for several reasons. One was that material looks what it looks. Don't get me wrong, I think it looks great. But it's not made to be adaptable the way bootstrap is. And at the time I started I didn't know what I would prefer. Also, in other projects we're using bootstrap 3 so I wanted to see how that is going and it was something familiar :)

I had some trouble with Material-UI at the time I tested it. I could not get my hands at some properties that I needed to set in order to work well with Reagent. There's a thread about this in the Reagent list.

Bootstrap is mostly CSS, and while I started with the Javascript they have for dropdowns etc. I'm now replacing that with pure Reagent versions. That makes the code pretty lean and for a good learning experience. From that perspective a mostly CSS framework is easier to incorporate into Reagent than a ReactJS framework that you have to wrap around. At least that was my experience.

Torsten.

[cedric roussel]

Hi Fernando,

Using semantic-ui css only works pretty good in my experience.
We don't include js files and trigger class changes on state changes.

(def modal-state (reagent/atom false))

(defn current-page []
  [:div [:a.ui.btn {:on-click (fn [_] (reset! modal-state true))} "open modal"]])

(defn modal []
  (when @modal-state
    (let [close #(reset! modal-state false)]
      [:div.ui.dimmer.modals.page.transition.visible.active
       [:div.ui.standard.test.modal.transition.visible.active.scrolling
        [:div.header "Modal header"]
        [:div.actions
         [:div.ui.black.deny.button {:on-click close} "Cancel"]
         [:div.ui.positive.right.labeled.icon.button {:on-click close} "Ok"
          [:i.checkmark.icon]]]]])))

(defn mount-root []
  (reagent/render [modal] (.getElementById js/document "modal"))

  (reagent/render [current-page] (.getElementById js/document "app")))

It's still a bit messy to find all css classes, and I did not really care about transitions, but that's doable without going into component-did-mount.

Cédric