Navigating between routes containing Leva panels with a same-name field uses stale data

[about-hector]

Hello @dbismut ,

I'm encountering a problem that I'm pretty sure is easy to fix but my lack of experience is impeding me to.
I tried to read the code, go-to-definition for types etc but I just can't figure it out.

I have a /components route in my website,
every components/[slug] route might or might not include a Leva panel to play around with the component.

When I navigate between different routes, say I move from /components/1 to components/2, if the panels on both the pages include a field with the same name (say 'width') what happens is that I'll have the width of components/1 inside of /components/2's panel, and instead of being in the correct order the same name field is always at the top.

I am sorry for my dumbness but I really can't figure it out,
can you hint me in the right direction regarding why this is happening?

I'd be happy to contribute to the docs if needed,
please let me know if I can be of use for pmndrs :)

[dbismut]

Could you please provide a sandbox? I'll try to fix it for you when I have time.

[about-hector]

Could you please provide a sandbox? I'll try to fix it for you when I have time.

Sure, thank you!

Here's the sandbox: https://codesandbox.io/p/sandbox/bold-estrela-4cl2r7

It's next 14 with only Leva as a dependency.
The / route has 2 for client side navigation, so you can go to both /component-1and component-2

In these routes I use useControl, I define a field named 'width' in both, but one also has the height defined as the first field to showcase the bug.

So, the "symptoms" are:

• when navigating from component-1 to component-2, the width property of component-2 is not 20 as we would expect, it is instead 200 which is the one we had in component-1
• the order of the fields in the leva panel is wrong, width is now first.
• can't access width even if i used the following construct as per docs

const [{width}] = useControls(()=>{
    width: {
        value: 20, 
        onChange......
    }
})

if you refresh, you'll see the rectangle resetting to the correct width.

but then if you client side navigate to component-1, width is again gonna be wrong because leva didn't update it.

So basically it's something about client side navigation, but for all I know it might be me ignoring a specific property I ought to use :) the sandbox should have everything you need to understand the behaviour, every navigation link is client-side so just have fun with it and check the rectangle's width

Thank you so much for your help