Does anyone have an example of how to use reagent.core/partial? https://github.com/reagent-project/reagent/blob/1000672d76454bc83001d3a7618a9e2401909bf2/src/reagent/core.cljs#L340-L343

I'm kinda in shock that I haven't seen this before

How did I miss this?

Why wasn't I told? :-)

Haven't really used it myself

@mikethompson I know the feeling. Just when you thought that you've seen it all...

as far as I can see, it's similar to using a Form-2 component with a fn bound in a let though

(defn foo-component [{:keys [something another]}]
  [input-component {:on-change (r/partial change-callback something) ...}])

although.... if the arguments to the function stay the same, the child wouldn't necessarily rerender

I mean if the arguments depend on the props

In the example, if something doesn't change, the :on-change fn shouldn't change either

that's clever

In re-frame terms, this old way:

(defn foo-component [{:keys [something another]}]
  [input-component {:on-change #(dispatch [:it-changed]) ...}])

(defn foo-component [{:keys [something another]}]
   [input-component {:on-change (r/partial dispatch [:it-changed]) ...}])

true, it's a great fit for dispatch

well it won't work with on-change because you'd need the argument...

Hmm.

it would get added as a 2nd argument to dispatch

Indeed. So more thought needed. But I like it.

it could be helpful as an optimization to prevent unnecessary rerenders

Yes, exactly. But how to package it without confusing everyone. I look at things through the lens of "how much docs to explain this"

You could introduce a macro which reuses the same idea as r/partial: {:on-change (rf/dispatch-fn [new-text] [:it-changed new-text])}

rf/dispatch-fn being analogous to clojure.core/fn

the danger is that it become hard to grok what's going on behind the scenes

I have 2 components I’m trying to import via shadow-cljs, after previously using the ‘double bundle’ method.

One of these components is accessed via [:> foo], while the other is [:> (.-default bar)]

Now that I’ve switched the build to shadow-cljs, the first component does not work with either method.

try printing out foo to the console

ok

these days I always inspect in the console first; it always gives you a first clue

but @thheller may have a better idea what's going on

thats a good start. react component libs are bundled in a variety of ways and something its not exactly clear whether you are supposed to use default export or something else

Let me back up… once I’ve required the component… I’m using a let binding to get a local name

Like this:

(js/console.dir foo) is also pretty useful for inspecting what you actually get

["react-avatar-editor" :as react-avatar-editor]

It’s an empty object ATM 😉

Let me try the original ns

I get a function which looks like a normal react component

(:require ["react-avatar-editor" :as react-avatar-editor]) then [:> react-avatar-editor ...]

Well, that’s revealing. Both objects are empty.

what do you mean empty? {} or null

😕

{}

that's peculiar

how are you printing the object? console.log?

log says {} while dir shows nothing

I don't know then, except that that's not normal

ok, hold on… back to shadow

Has anyone ever managed to create a file input element in reagent that refuses to actually open the dialog box? I moved some code that used to work into its own file and now this happens. I cannot for the life of me figure out how I broke this.

@lee.justin.m No console clues?

I did one of these recently, but it didn’t break.

no nothing. it’s infuriating

If that happened to me I think my first try would be shut down the repl, lein clean and restart. Sounds like something's corrupted somewhere

That’s a good thing to try

Also could it be that a function call needs to happen in the same event loop tick as a user click?

A stab in the dark admittedly

Has anyone run into this issue posted here? https://stackoverflow.com/questions/49419189/render-table-element-with-colspan-in-reagent

@lee.justin.m What does the callback look like? I’ve gotten the lambda wrong sometimes, and the event was never handled.

The dialog doesn’t even show so I’m not getting that far

Is your event named correctly? case, etc?

Can you try in multiple browsers?

[:input {:type :file :accept "image/*"
               :style {:position :absolute
                       :top 0
                       :right 0
                       :width 65
                       :height 55
                       :opacity 0.0
                       :cursor :pointer}
               :on-change #(handle-file-change %)}]

@lee.justin.m You're talking about the browser's built-in file input, with the button you click to select the files, right? If that's not working, there's a good chance something corrupted in the browser itself -- a browser restart and/or hard cache reset might be in order.

Or if you have an :accept setting, check that for weirdness.

@lee.justin.m did you figure it out?

no. something very strange is going on here. i’m trying to reboot the improbability drive

@manutter51 @jmckitrick thanks for your help. the issue was that a back onclick handler in the parent div prevented the native widget from working. I’m quite surprised by that, but maybe the click has to propagate all the way up to work (?)

(the real problem is that my hot reload environment was getting screwed up so i kept doing experiments that weren’t actually having any effect)

Glad you figured it out. I’m also interested in what went wrong in your env, once you know.

okay this is the issue: i was using the the ol’ “hidden input” trick. this worked fine before because the visible div button and the input were siblings. then i moved them into their own file and the input became a child of the div. you click on the div, it calls .click on the input, which of course then propagates the click back to the same click handler. i don’t know why this doesn’t cause an infinite loop--there may be some kind of code prevention in the browser for that.

the super confusing thing is that then when i made the input element visible so i could test the native button, it still didn’t work because of this infinite loop thing.