Prevent navigation while editor is active

[Nutomic]

Is there any way to prevent the user from navigating to a different page while entering a text? The following code works to show a warning when the tab is closed, or the user navigates to a different domain:

    let _ = use_event_listener(use_window(), beforeunload, |evt| {
        log::info!("window unload");
        evt.stop_propagation();
        evt.prevent_default();
    });

However it is still possible to navigate within the Leptos page. Is there any way to prevent that?

[gbj]

The ability to do this lives within your application code -- For example, you could disable links; or, if you want to add a warning behavior, you could try adding a global click event on the window that checks for an <a> tag and prevents the event from propagating. (The router's client-side navigation works by handling click events on the window in a similar way.)

[Nutomic]

Thanks for the explanation. Is there an example code for this? I assume you mean use_event_listener(use_window(), ev::click, handler), but Im not sure how to get the html element from that. And stop_propagation/prevent_default arent working either.

[gbj]

No, there is not an example that covers your specific scenario.

Adding an event listener to the window should be fairly simple:

    let handle = window_event_listener(leptos::ev::click, move |ev| {
        ev.prevent_default();
    });

When I try this in the router example (I just added it in the main app component before any of the router stuff) it successfully prevents clicking the links from doing anything. Obviously you should add whatever logic you want to test whether the event should work or not.

[Nutomic]

It turns out the listener only works if its defined inside the top-level app. But if I define it inside a view (eg in About()), then prevent_default() has no effect (I confirmed with logging that the handler actually gets called).