Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 1 commit into from

Conversation

aarajput
Copy link

@aarajput aarajput commented Feb 8, 2025

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>

Pre-launch Checklist

@aarajput aarajput requested a review from ditman as a code owner February 8, 2025 09:55
@flutter-dashboard
Copy link

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.

Copy link

google-cla bot commented Feb 8, 2025

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
Copy link
Contributor

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
Copy link
Author

aarajput commented Feb 8, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants