Yew router when pushing history breaks form submits

[Firstyear]

Problem
When a form is submitted that triggers a yew router push_history event, and subsequent form that is rendered by yew is unable to be submitted.

Steps To Reproduce
Steps to reproduce the behavior:
To reproduce this, I have provided a minimised example in the following repository:

https://github.com/Firstyear/yew-sandbox

Expected behavior
Pushing a route to the history to change pages with yew_router should not break form submissions.

Screenshots

Environment:

• yew-router = "0.16.0"
• yew = "0.19"
• browser = edge 96.0.1054.62 (Official build) (x86_64)
• built with wasm-pack, see repo.

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I don't have time to fix this right now, but maybe later

[Firstyear]

Tested on master rev f6f0e34d0f914821cbeb1a9cfbd8f201d2594b18 and it also fails there. (See branch latest of repro)

[voidpumpkin]

@Firstyear I dont think action="javascript:void(0);" is supposed to work but maybe im wrong.
Usually the flow for submitting with forms and to cancel default functionality is to use event,prevent_default().
so in app1.rs you can:

...
 <form
                onsubmit={ ctx.link().callback(|e| {
                    e.prevent_default();
                    AppMsg::ChangeState
                } ) }
>
...
</form>

[voidpumpkin]

Also im not sure what is going on here https://github.com/Firstyear/yew-sandbox/blob/main/src/manager.rs#L28
Consider using a yew_router::Redirect component https://yew.rs/docs/next/concepts/router#redirect

[Firstyear]

Also im not sure what is going on here https://github.com/Firstyear/yew-sandbox/blob/main/src/manager.rs#L28 Consider using a yew_router::Redirect component https://yew.rs/docs/next/concepts/router#redirect

There are no examples of redirect on https://docs.rs/yew-router/latest/yew_router/ which is why I didn't know this existed. Everything refers to pushing history.

I dont think action="javascript:void(0);" is supposed to work but maybe im wrong.
Usually the flow for submitting with forms and to cancel default functionality is to use event,prevent_default().
so in app1.rs you can:

With the changes you suggested, this still doesn't work with push history. Main of the repro has been updated to show this.

              <form
                onsubmit={ ctx.link().callback(|e: FocusEvent| {
                    e.prevent_default();
                    AppMsg::ChangeState
                } ) }
              >

If anything removing the onaction actually causes more issues because then on the second form submit, it doesn't seem to invoke the onsubmit handler and then triggers the tradition submit which causes the route to bypass the yew router code causing a 404.

Using Redirect somehow actually makes the situation worse, where the submission to the form will redraw, but the redirect never actually commits and then breaks. You can see this in the "redirect" branch of the reproducer.

[Firstyear]

Tested in chrome 96.0.4664.110 (Official Build) (x86_64) as well now.

[voidpumpkin]

@Firstyear Ok sorry i completely missed what you are trying to do here. Dont use forms with submit buttons + push_route to navigate between pages. Try using yew_router::Link.

Unless this is just a simplification and in real code you have to navigate on submit press, then idk how to help.
Usually people do some fetching on submit and only after the fetch completed, they use push_route to navigate.

[voidpumpkin]

Here are the docs: https://yew.rs/docs/concepts/router#navigation

[voidpumpkin]

2 more things regarding with your setup:
1:
I would suggest back button i would suggest using history.back() :

                ctx.link()
                    .history()
                    .expect_throw("failed to read history")
                    .back();

2. Your rounting is broken because you have an invalid SPA setup. Try manually going to page /app1, you will see you get a 404
   This happens because rollup tries to serve index html from folder /app1 when it should be serving index.html from root /

[voidpumpkin]

To add to 2nd point, this is why a lot of people use trunk as it handles that problem for them.

[voidpumpkin]

Please ask further questions in Discussions tab or in our discord.

I am closing this as this is not an issue that needs to be worked on.

[Firstyear]

The thing is this previously worked with yew-router, so it's a regression actually. It also works if you don't use the router API and just signal for the components to be swapped.

It also breaks if you remove the form, and just use the button as per the example of "mycomponent". See the updated commits to the repro. Using "Link" however works, which confuses me even more.

The reason I wanted to use the form/submit is to allow an autofocus to the element so the user can press "enter" to proceed.

And yes, I have the miniserve now working in spa mode so that the route is not 404'ing.

[voidpumpkin]

Ok im not sure how to handle this issue, Could you look into this @futursolo ?

[voidpumpkin]

No no sry i forgot this issue is related with his env setup

[voidpumpkin]

@Firstyear Like I said your issue is not with yew or yew-router. The problem lies on how you serve your application.

Read this 3 times or try googling the concepts mentioned here in 2nd point #2344

[Firstyear]

By the way, if you look at the repro, you'll notice I updated this following your advice and it still breaks:

#[function_component(MyComponent)]
pub fn my_component() -> Html {
    let history = use_history().unwrap();
    let onclick = Callback::once(move |_| history.push(Route::App2));

    html! {
        <>
            <button {onclick}>{" Next "}</button>
        </>
    }
}

impl Component for App1 {
    type Message = AppMsg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        App1 {}
    }

    fn changed(&mut self, ctx: &Context<Self>) -> bool {
        false
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            AppMsg::ChangeState => {
                false
            }
        }
    }

    fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool) {
        console::log!("rendered");
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        console::log!("view");
        html! {
            <body>
            <main>
                <h1>{ "Proceed" }</h1>
                <MyComponent />
            </main>
            </body>
        }
    }
}

[voidpumpkin]

I did not mean to belitile sorry. I just had trouble running your example repo I guess. Sorry 🙏

[Firstyear]

I have commited the built artifacts into the repo to make it easier if you want to run them. You only need to run the mini serve command as above to test it yourself as it matches the sources provided.

I appreciate the apology. I really am trying to report a genuine issue here, and am trying to listen to your feedback. As you can see i've updated my repro to use elements from the yew router book, and no forms and it still breaks for me, so there is a problem with the interaction of pushing history, and onsubmit.

This also isn't just a case of "go back in history". This was noticed in an application workflow which is:

Oauth2 External Redirect -> Sign In To Proceed (yew router form 1) -> Username (yew router form 2) -> Password (yew router form 3 ) -> Consent (yew router form 4).

After the initial selection of "sign in to proceed", the username form can not be completed as onsubmit no longer works.

[voidpumpkin]

It's very late for me today already but will make sure to investigate more during the weekend

[Firstyear]

All good mate. I really do want to help, and I think I'm on opposite timezones to you (Australia). If there is more information I can provide please let me know.

[futursolo]

This is a bug, but not associated with yew-router.

When Yew registers an event listener, it registers on the <body /> element. However, in your example, <App1 /> and <App2 /> both contain a separate body element. Which causes yew to delete and recreate a body element and when that happens, event listeners are not re-registered.

I don't think you need to use start_app_as_body as per your example. Try switch to start_app and remove <body> from your App and your issue should be fixed.

I think other than this issue, the "manage body inside of virtual dom" also behaves poorly with the upcoming hydration and SSR.
Rather than fixing this issue, I think it might be better to simply remove it.

[Firstyear]

I used start_app_as_body in this example as I was using that in the other project, but it's interesting that this is the cause. Thank you!

[Firstyear]

@futursolo I've re-written the reproducer to remove start_app_as_body and use start_app, removing body tags, and this resolves the issue. Thank you!

[Firstyear]

I think there needs to be a way to manipulate the body element though, especially WRT adding or changing stylesheets.

[futursolo]

You can simply do document().body().class_list().add() like what people in the React world does.

Or make your styles with body as selector.