How to recover scroll bar position with Show?

I'm using <Show> to render component.
The component has scroll bar.
But when I re-render if <Show when = { true } >
I lost scroll bar position.

thetarnav•12/26/22, 9:17 PM

my two solution ideas:

You could probably just hide the component with display:none instead of conditionally rendering component
cache the previous scroll position onClenaup and reset it onMount

Tthetarnav my two solution ideas: 1. You could probably just hide the component with displa...

musicloverOP•12/26/22, 9:25 PM

2nd solution is much better...I'll try it out thanks..

Tthetarnav my two solution ideas: 1. You could probably just hide the component with displa...

musicloverOP•12/26/22, 9:48 PM

I'm trying 2nd solution, but it's not working. Can't I put signal inside?
It seems when component is re-rendered by Show, the signal value goes 0.
Does it re-create signal,too?

thetarnav•12/26/22, 9:50 PM

Does it re-create signal,too?

yup

thetarnav•12/26/22, 9:50 PM

is pretty much like , new data instance

Tthetarnav > Does it re-create signal,too? yup

musicloverOP•12/26/22, 9:50 PM

Isn't Solid component function called once? not like React

REEEEE•12/26/22, 9:50 PM

But Show unmounts it

musicloverOP•12/26/22, 9:51 PM

Then, Should I put signal outside function?

thetarnav•12/26/22, 9:51 PM

not sure if you need a signal at all

thetarnav•12/26/22, 9:51 PM

just store the position in a variable

Tthetarnav not sure if you need a signal at all

musicloverOP•12/26/22, 9:51 PM

Global variable?

thetarnav•12/26/22, 9:52 PM

if this component can be mounted in multiple places at once, you probably should manage the cache by a key or something, but just a variable that you udpate is fine

musicloverOP•12/26/22, 9:52 PM

Then, it's not re-usable component, whenever I use this component, I need to declare global variable..

thetarnav•12/26/22, 9:53 PM

you can re-use the variable too

thetarnav•12/26/22, 9:53 PM

but you can also use the parent component for that

musicloverOP•12/26/22, 9:54 PM

Is there no way to put any storable variable inside function in unmountable component ?

thetarnav•12/26/22, 9:55 PM

if you don't unmount the component, there is no problem
but you unmount it and then mount a compleately new instance of it

thetarnav•12/26/22, 9:55 PM

there are ways to solve it, but you need to have a link between diffferent component instances, it doens't self-contain the state anymore

musicloverOP•12/26/22, 9:56 PM

Ok, So If we use <Show>, the component function will be called like React right?

thetarnav•12/26/22, 9:57 PM

you can even do this

Tthetarnav you can even do this ```ts const createFoo = () => { let myCache const Foo =...

musicloverOP•12/26/22, 10:10 PM

Thanks thetarnav! It's amazing approach. I didn't know I could wrap component function by other function...