[url_launcher]: (Web) When click on Link widget without calling followLink function still takes browser to that link

[aarajput]

Bug

If you wrap a ElevatedButton with Link widget on web, and don't pass followLink function to ElevatedButton, when you click on that ElevatedButton button, it still takes user to that link.

Sample Code

import 'package:flutter/material.dart';
import 'package:url_launcher/link.dart' as ul;

class GoogleButton extends StatelessWidget {
  const GoogleButton();

  @override
  Widget build(final BuildContext context) {
    return ul.Link(
      uri: Uri.parse('https://google.com'),
      target: ul.LinkTarget.blank,
      builder: (context, followLink) => ElevatedButton(
        onPressed: null,
        child: Text('Open Google'),
      ),
    );
  }
}

The issue was happening because Link widget is creating below element on web:

<a rel="noreferrer noopener" aria-hidden="true" tabindex="-1" href="https://google.com" target="_blank" style="opacity: 0; display: block; width: 100%; height: 100%; cursor: unset;"></a>

Even when i am not passing followLink to onPressed, it still opens google in new tab.

Fix

We need to pass onclick="event.preventDefault();" to a html element so that it won't open link on it own.

This is how it looks after the fix:

<a rel="noreferrer noopener" aria-hidden="true" tabindex="-1" href="https://google.com" target="_blank" style="opacity: 0; display: block; width: 100%; height: 100%; cursor: unset;" onclick="event.preventDefault();"></a>

• Fix Issue: [url_launcher] [Web] Clicking on Link without calling followLink function still takes user to that link

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene page, which explains my responsibilities.
• I read and followed the relevant style guides and ran the auto-formatter. (Unlike the flutter/flutter repo, the flutter/packages repo does use dart format.)
• I signed the CLA.
• The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
• I linked to at least one issue that this PR fixes in the description above.
• I updated pubspec.yaml with an appropriate new version according to the pub versioning philosophy, or this PR is exempt from version changes.
• I updated CHANGELOG.md to add a description of the change, following repository CHANGELOG style, or this PR is exempt from CHANGELOG changes.
• I updated/added relevant documentation (doc comments with ///).
• this PR is test-exempt.
• All existing and new tests are passing.

[flutter-dashboard]

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption, contact "@test-exemption-reviewer" in the #hackers channel in Discord (don't just cc them here, they won't see it!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. The test exemption team is a small volunteer group, so all reviewers should feel empowered to ask for tests, without delegating that responsibility entirely to the test exemption group.

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[stuartmorgan-g]

We need to pass onclick="event.preventDefault();" to a html element so that it won't open link on it own.

This would break a lot of usage of Link. One of the critical use cases Link addresses is that browsers often restrict opening windows outside of the context of a synchronous UI interaction, and calling openUrl from a Flutter event isn't synchronous relative to the browser's interaction model. Having an actual link avoids that issue.

Given that, this is not a change we would take. The next step here is to understand the use case in the issue, so that we can see if there is a way to address that use case without breaking common Link usage.

[aarajput]

Ok, what about i create a property like 'preventDefault', and if its true then i add event. preventDefault() in a tags?

[ditman]

I think @mdebbar fixed this one recently:

• See: [url_launcher][web] Prevent browser from navigating when followLink isn't called #8675