Clojurians Log v2

What's the right way to call something like .scrollIntoView on a Fulcro component? I'd like to be able to do this in the ok-action of a mutation, for example, not a button click. It's unclear to me how I should correctly get the javascript element that's needed to call this method. Thanks

do you know the component's ident in your ok-action? if so you could store a ref to the js element in component local state and get the component, then get the js element from local state

Yes, I do. What would the ref be? Do I give my component an id and store the value of .getElementById?

see :initLocalState here: https://book.fulcrologic.com/#InputFocusandReactRefsLifecycle

(you'll need to know about react refs if you don't already: https://reactjs.org/docs/refs-and-the-dom.html)

basically what's going on here is that we want to save a reference to the JS object that has been created (so, after the first render at least) and we want to save it somewhere in the component that's (1) easy for fulcro-code to access and (2) OK with other principles of fulcro

from (1) alone the fulcro DB or component local state might have been ok, but we can rule out the fulcro DB from (2) since only immutable data should go in the db

so in initLocalState we make a function that, when passed as a :ref prop, will save the ref to some property on this (the component)

Thanks. I'm aware of ref props and local state. It's the functions I need to call and the parameters that they accept that I'm in the dark about. Thanks for the links. I'll read up

yeah looking at this example more closely i'm not actually sure this exact approach will work from you, i'm not sure if there's an easy way to get a ref to this (the react element) from outside a component's lifecycle methods

i wonder if it'd be ok to save to fulcro's local state instead of to a property on the react element object, which is what that example is showing

In my initial search to answer this question, refs is what turned up. Although everything was restricted to react in javascript, and re-frame. I was thinking of a computed prop, like should-scroll?, which I could toggle in the ok-action via the component's ident. But then what the heck would I call when the computed prop changes? As a test, I tried calling scrollIntoView on this in an onClick handler, but that had no such method called scrollIntoView. I'm still not sure I even know what "this" is

this in defsc is the react component, which is like a wrapper over a raw DOM element (the ref). I use hooks for this, there's a fulcro wrapper hooks/use-ref https://reactjs.org/docs/hooks-reference.html#useref

so basically you (let [ref (hooks/use-ref)] and then you can pass it to a (dom/div {:ref ref}) and that ref now points to that dom element. not sure if that helps you

> not sure if that helps you Huh. Interesting. Could be it. Thank you