How do I structure this app? | Issues with Routing and preserving the identity of HTML elements

[stoic pagoda]

I have a search bar. When the user types on that search bar, I want to update the URL and the results list.

The URL is meant to reflect the search, such that, when I enter that URL directly, I am taken to that search.

Clicking on a result will take me to a ResultDetails. ResultDetails also have their own URL.

My issues:

• I can't put the search bar inside the router and tell it to push to the Navigator, because this will re-render the search bar, essentially creating a new one. This will disrupt the user's typing (as the search bar will lose focus)
• #[layout] does not count as being inside the router and cannot use_navigator
• I can't put the search bar outside the router. This would preserve the input field, but it can't navigate
• I can't put the search bar outside while putting something inside the navigator to handle the navigation, because the ResultDetails will end up forcing you out to the results list as soon as you get to it. There's no way to make it only push if it detects a change and not when it renders

What do i do?

[primal quest]

At the very least, it should be possible to update the current url with web_sys via the History api. Then you could get the parameters in your router and construct your page accordingly on reload.

[stoic pagoda]

hmmm

[north saffron]

There was a bug with resetting components in the router in debug mode in an older version of dioxus

I think it is fixed in the latest patch release. Try running cargo update

For reference, this example is similar and should run like this in the git version of dioxus: https://github.com/DioxusLabs/dioxus/blob/main/examples/query_segment_search.rs

[stoic pagoda]

this works on my local version as well

however

there is no way to have a search bar in the Home route which stays unchanged when switching to the Search route

preserving the state through signals is not enough

because switching routes also defocuses the search bar

it seems like switching from one route to another triggers a full re-render, and there's no way to tell Dioxus to not delete an object in between routes because it's supposed to still exist in the next route

[north saffron]

Does it work in release mode?

Sounds similar to https://github.com/DioxusLabs/dioxus/pull/3630

Layouts should not be recreated if you are switching between routes

[stoic pagoda]

the layout isn't recreated

however, i also want to change where the search bar is in between routes

which idk how to do with a layout

specifically, in Home it should be in the center of the screen, while in any other place it would be at the top

[north saffron]

In general you can't tell dioxus to move an element between different components, but you could try to combine your components

[stoic pagoda]

doing this doesn't work, because dioxus assumes the search bars are different elements altogether

if query.is_empty() {
  rsx! {...}
} else {
  rsx! {...} //same but the input {} would have a different class so it's affected by different css
}

[north saffron]

Or just use signals and focus your element manually with the onmount event

[stoic pagoda]

hmm

putting the condition inside the rsx! {} doesn't have the same issue

wild

this worked

... how does this work?

how does dioxus know that the input element is the sameone here even though it's in a different place, in a different environment, etc

but doing different rsx!{}s does not work the same

ignore the redundancy of that if......

wow that's shameful

lmfao

[north saffron]

The shape of the static parts of the rsx need to be the same

The if statement makes it dynamic

[stoic pagoda]

i see

but, like

this if statement is not actually causing dioxus to recreate the element (which is good because this is what i want)

even when the element has its class changed by the external if