Fork me on GitHub
#fulcro
<
2020-11-16
>
tvaughan17:11:19

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

lgessler18:11:43

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

tvaughan18:11:13

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

lgessler18:11:00

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

lgessler18:11:33

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

lgessler18:11:05

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

lgessler18:11:02

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)

tvaughan18:11:05

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

👍 3
lgessler19:11:07

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

lgessler19:11:27

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

tvaughan19:11:31

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

nivekuil19:11:48

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

nivekuil19:11:30

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

tvaughan19:11:09

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

tvaughan19:11:38

Turns out that Fulcro doesn't completely support hooks. I ran into problems using this approach. I was able to use componentDidUpdate and call getElementById etc. to scroll as appropriate based on the current props, e.g. (comp/props this) . Thanks for everyone's help!

🎉 3