@gonewest818 it isn’t clear to me why the default wouldn’t do what you expect

If the sa/Select doesn’t work, but :select does though, you may wan tto look at the generated html

See what sa/Select is producing. I’m not the most qualified to answer this though since I haven’t used these semantic-ui components myself yet

You could do something like controlling all your values

and then build your own :on-submit

Most of the time the pattern seems to be all controlled input, no default behavior for form submission due to typically wanting something like an async request

Not sure all your specifics. However, I’d think the simple and default behavior would work if you aren’t somehow controlling certain components in a way that is preventing the default DOM state from happening

I did look at the html. I think it’s because a “sa/Form” isn’t a “<form>“, neither is a “sa/Select” a “<select>“. They’re divs with CSS and some custom javascript doing whatever it is they do. I haven’t looked at the react bootstrap components but I wouldn’t be surprised if the situation is similar.

Anyway, answering my own question, I guess my handler will end up something like (set! js/window.location.href (format "/?foo=%&bar=%" a b))

And I’m really not doing anything all that tricky in the components (because I’m new at this).

Are you wanting the page to navigate away?

Yeah, if they are making <div> etc, I’d think you’d have to take control of the submission

To get the correct values placed on the query param names you want

yes, that seems to be the case. Alright, I’ll take control of the submission for now. Later, I may choose to rip this out and not navigate away, but I might as well complete this journey before taking the next. thanks

Ok, sounds good

Sorry I can’t be a whole lot more help in that case.

The author of the soda-ash project is on this channel though I believe from time to time

All good, problem solved.

I switched everything back to the soda-ash variants like so:

[sa/Form
  [sa/Input ...]
  [sa/Select ...]
  [sa/Button {:on-click #(set! js/window.location.href ...)]]

Ok, interesting

@gonewest818 happy you were able to figure it out!

Thanks

What's people's go-to for enter/exit transitions these days? Every time I try to mix in react-motion the mix of js/cljs props makes things super painful

@minikomi we ended up using react-flip-move but I haven't looked at this space in a year, so there might be shiny new things available

how it can be made to work with reagent shown here: http://upgradingdave.com/blog/posts/2016-12-17-permutation.html

I have used react-flip-move based on a previous recommendation from @mikethompson and i can say it works great!

Does anyone have any experience using https://github.com/atlassian/react-beautiful-dnd via reagent? They use a redux-style connect strategy to co-ordinate dragging & dropping and I’m having trouble translating their basic example into clojurescript & reagent code

I’m using a combination of (as-element ...) and (get-props (current-component) to try and switch between reagent and react as needed

But one of my current-component calls is returning nil so I’ve no idea how to get the current component instance or the react equivalent

For info, a self-contained version of my code would be:

(defn dnd
  []
  [:> Dnd.DragDropContext {:onDragStart on-drag-start :onDragEnd on-drag-end}
   [:div
    [:> Dnd.Droppable {:droppableId "library" :isDropDisabled true}
     (fn [provided snapshot]
       (r/as-element
        [:div {:ref (.-innerRef provided)}
         (for [{:keys [id content] :as item} [{ :id 1 :content "First" } { :id 2 :content "Second" } { :id 3 :content "Third" }] ]
           (r/as-element
            [:> Dnd.Draggable {:key id :draggableId id}
             (fn [provided snapshot]
               (.log js/console provided snapshot)
               (r/as-element
                [:div
                 (do
                   (.log js/console (r/current-component)) ;; FIXME can't get current component as in react land, not reagent land. Crashes at this point
                   (let [handle-props (r/props (r/current-component))] ;; FIXME: probably need to log this stuff to see what it looks like
                     (.log js/console handle-props);
                     (r/as-element
                      [:div (merge handle-props {:ref (.-innerRef provided)})
                       (r/as-element
                        [lib-fragment id content])
                       ])))
                 (.-placeholder provided)]))]))]))]]])

(following the example on the react-beautiful-dnd homepage, I’d normally have much shorter fns…)

Hello, how can I change the value of :active in my nav items? just altering the ratom does not seam to work... Sorry for the beginner question

here is my snippet

@eveko One thing I noticed, is you have def menu instead of defn menu []

Was that just a typo of pasting the example?

no it is a def

otherwise i can put it in the main [:div.header menu]

inf my main fn

can't*

@eveko than I think that is your problem

you have to deref reactive atoms (aka “ratoms” (aka r/atom )) during the rendering of a component

(defn menu [] <etc>)

ah ok

it works now

[:divheader [menu]]

if feel so silly now

thanks for the quick fix

No problem!