tauri: [bug] Anchor tag not opening link in default browser

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>

Startup tauri
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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 18 (7 by maintainers)

Most upvoted comments

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/")
}

nguyenvanduocit on Aug 1, 2022

I found the best approach:

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

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

Hope that helps

12a6 on Apr 27, 2023

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 ! ❤️❤️❤️

wangzhigang1999 on Apr 7, 2023