[bug] Anchor tag not opening link in default browser

[Matix-Media]

Describe the bug

When I create an anchor tag with target="_blank" and a href to some other domain and click on that anchor, the link does not get opened in the default browser but in a new tauri window.

Reproduction

The code base is in a private company repo, but I can share the code snippet. I use svelte if that is for relevance.

            <a href={detailsViewedOptimization.learnMore} target="_blank">
                <span class="underline">Learn more</span>
                <Icon IconName="external-link" />
            </a>

1. Startup tauri
2. Click on the link.

Expected behavior

The link should normally open in the default browser.

Platform and versions

Environment
  › OS: Windows 10.0.22000 X64
  › Webview2: 103.0.1264.62
  › MSVC: 
      - Visual Studio Build Tools 2019
  › Node.js: 16.13.2
  › npm: 8.1.2
  › pnpm: Not installed!
  › yarn: 1.22.18
  › rustup: 1.24.3
  › rustc: 1.61.0
  › cargo: 1.61.0
  › Rust toolchain: stable-x86_64-pc-windows-msvc 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0
  › @tauri-apps/api [NPM]: 1.0.0-rc.5
  › tauri [RUST]: 1.0.0,
  › tauri-build [RUST]: 1.0.0,
  › tao [RUST]: 0.11.2,
  › wry [RUST]: 0.18.3,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../dist
  › devPath: http://localhost:3000/
  › framework: Svelte

App directory structure
  ├─ .git
  ├─ .github
  ├─ .vscode
  ├─ dist
  ├─ node_modules
  ├─ public
  ├─ src
  └─ src-tauri

Stack trace

No response

Additional context

No response

[FabianLars]

Do you have shell.open enabled in your allowlist?

Also, you should update @tauri-apps/api to a non-rc version too.

[Matix-Media]

Do you have shell.open enabled in your allowlist?

I am not the rust developer for this project, but in tauri.conf.json the allowlist is set to:

{
    "all": true
}

Also, you should update @tauri-apps/api to a non-rc version too.

I assume the docs tell me how to update a rust crate, because I don't know how (as I stated, I am not a rust dev).

[lucasfernog]

@tauri-apps/api is not a Rust crate, it's an NPM package.

[Matix-Media]

Okay, so I updated @tauri-apps/api to version 1.0.2 but the problem is sadly not fixed.

[FabianLars]

Didn't expect it to fix it, that was mainly just to not get any other problems in the future 😅

What does the link roughly look like? Because i can't reproduce this at all. The only thing (other than a special-case url) i could imagine would be that your frontend bundler removes the target for whatever reason, but even than the behavior would be different (it would open the link in the current tauri window)

[Matix-Media]

The link looks like this: https://********/optimizations/1 (domain censored).

This is happening in dev mode.

I just realized something even more weirder, I have another link with a target="_blank" on a different svelte page, on which works fully as intended. I don't know what is happening...

The other link:

        <a href={config.registerLink} target="_blank">
            <span class="underline">{$_("login.newHere.2")}</span>
            <Icon height="18px" width="18px" IconName="arrow-forward" />
        </a>

The URL: https://********/register (domain censored, same domain as other link).

[lucasfernog]

We can find the issue if you share a minimal repo we can use to reproduce it.

[Matix-Media]

Well, I would need some time to create a reproduction repo, as the app I am working on is closed source, and I am under a NDA. I would need some time for that though.

[nguyenvanduocit]

Here is my solution (vue)

Html

<button class="btn btn-primary" @click.prevent="openFacebookPage"> <i class="fe fe-phone-call"></i> Contact us</button>

JavaScript

import { open } from '@tauri-apps/api/shell';
const openFacebookPage = () => {
  open("https://www.facebook.com/aiocean.io/")
}

[Matix-Media]

Here is my solution (vue)

Html

<button class="btn btn-primary" @click.prevent="openFacebookPage"> <i class="fe fe-phone-call"></i> Contact us</button>

JavaScript

import { open } from '@tauri-apps/api/shell';
const openFacebookPage = () => {
  open("https://www.facebook.com/aiocean.io/")
}

I used that solution too, but it sadly wont work with everything. for example, in one place i need to put in translations, and inside of that translations is an anchor tag. That way I cant call svelte/vue component functions from that control.

{@html $_("optimizer.tagWarning.messages." + warningTag.tag, {
                values: {
                    tweak: warningTag.optimization.name,
                    beginFeatureBreaking: `<a class="underline" href="${warningTag.optimization.learnMore}" target="_blank">`,
                    endFeatureBreaking: "</a>",
                    beginReportProblem: `<a class="underline" href="${config.reportProblemLink}" target="_blank">`,
                    endReportProblem: "</a>",
                },
            })}

[lucasfernog]

An entire HTML element in a translation value is crazy though, you could probably just translate the URL.

[Matix-Media]

An entire HTML element in a translation value is crazy though, you could probably just translate the URL.

Would it be smart to put an HTML element in the translations? Also, this doesn't change the tauri issue.

[lucasfernog]

If you only translate the URL then you could use the workaround calling open directly. I'm just waiting for a reproduction example to fix the issue.

[nguyenvanduocit]

If you only translate the URL then you could use the workaround calling open directly. I'm just waiting for a reproduction example to fix the issue.

Totally agree. If you still want to translate whole DOM. you have to listen to the click event then call open.

[nikunjitaliya2]

if you want to jump into app to chrome when click on button you can use this code in angular

shell.open("example.com")

[wangzhigang1999]

Here is my solution (vue)

Html

<button class="btn btn-primary" @click.prevent="openFacebookPage"> <i class="fe fe-phone-call"></i> Contact us</button>

JavaScript

import { open } from '@tauri-apps/api/shell';
const openFacebookPage = () => {
  open("https://www.facebook.com/aiocean.io/")
}

This works for me ! ❤️❤️❤️

[12a6]

I found the best approach:

1. In Cargo.toml tauri = {version = "x.y z", features = [..., "shell-open"] }
2. In tauri.conf.json

"tauri": {
    "allowlist": {
      "shell": {
        "open": true // enable opening files/URLs using the default program
      }
    }
  }

Hope that helps

[FabianLars]

Closing this due to OP's inactivity and the missing reproduction. Once a reproduction is provided we will reopen this issue, thanks :)