Navigating programatically in new window/tab?

[ydirson]

broader context

I'm trying to build components (missing from Leponic today) for transient UI elements (popup dialogs and dropdown menus) containing user triggers to:

• change app state (through URL query string)
• navigate to external links (reference material, project website, etc)

I've experimented with Leptonic's Modal and with the HTML dialog element in modal mode, and with both I stumble on the same limitations.

my problem

We have 2 ways to navigate, each apparently with their own limitations:

• <a href allows to open links in other window/tab through target="_blank", but cannot be hooked to e.g. close the popup in which the link was rendered
• use_navigate being programmatic makes it easy even to have a component add cleanup actions to a navigate action, but apparently currently does not allow to "open in new window/tab", and not being a link, a mouse user cannot even right click to decide to open in new window/tab.

possible solution

Maybe NavigateOptions could be extended with a new_window flag, or a more generic target option?

alternatives considered

The only alternative I could think about is separating the navigation aspect (which can then be a link with target="_blank") from the "close the modal" (which thus stays limited to a separate action: click/tap on the backdrop, ESC key, "close" button...). Possibly that even leads to adding more stuff to the transient to "cognitively justify" not closing it. That "works" but the UI feels clunky, closing the transient should really be possible to automate.

[johnbchron]

I encourage you to look at the web-sys crate, which allows browser API access at the same level as JS. This is what use_navigate uses behind the scenes (I think). For example, I have the following set up because I run in islands mode and we don't yet have imperative navigation APIs in leptos that work in islands mode:

pub fn navigate_to(path: &str) {
  logging::log!("navigating to: {}", path);
  let result = web_sys::window()
    .expect("Failed to get window")
    .location()
    .set_href(path);
  if let Err(e) = result {
    logging::error!("failed to navigate: {:?}", e);
  }
}

pub fn reload() {
  let result = web_sys::window()
    .expect("Failed to get window")
    .location()
    .reload();
  if let Err(e) = result {
    logging::error!("failed to reload: {:?}", e);
  }
}

I'm sure you can find an API to imperatively open a new tab, I just don't remember the correct API to use. If you can do it with JS, you can do it with web-sys.

[ydirson]

Thanks for the hint, the web-sys API is Window.open_with_url_and_target()

So things can then go as follows to close the modal containing a button at the same time as following the link:

fn open_in_new_tab_and(url: &str, action: impl FnOnce() -> ()) {
    window().open_with_url_and_target(url, "_blank")
        .expect("should open a window");
    action();
}

...
                        <leptonic::Button on_click=move |_|
                            open_in_new_tab_and(&af_url, || show_when.set(false))
                        >

[gbj]

I agree with @johnbchron that the correct approach here is just going to be to use the Web platform's built-in ways to do this via web-sys. I do not know how to do this off the top of my head, but figuring out how you'd do it with JavaScript and then translating that into web-sys calls would be the right approach.