Clicking an a tag with an href that is supposed to go nowhere, navigates anyway

tonypowa commented 2 months ago

What happened?

I first reported an issue in GraphiQL here: https://github.com/graphql/graphiql/issues/3565 - I am trying to embed a GraphiQL editor for a new datasource I am creating.

There are a few places in GraphiQL that dynamically create a tag similar to this: <a href="javascript:void 0">lol</a>. The intent behind this code is that the element should behave like a link, but should not actually go anywhere

Clicking on <a href="javascript:void 0">lol</a> navigates me to http://localhost:3000/javascript:void%200

What did you expect to happen?

Clicking on <a href="javascript:void 0">lol</a> should not navigate me away from the page.

Did this work before?

Maybe? This functionality was probably introduced to Grafana at some point, as if you were to put <a href="javascript:void 0">lol</a> on a vanilla HTML page, you are not navigated away.

How do we reproduce it?

In a datasource query editor of your choice, add <a href="javascript:void 0">lol</a> as an element.
Click "lol" or the text inside the a tag
You are navigated away from the page

Is the bug inside a dashboard panel?

No response

Environment (with versions)?

Grafana: Grafana v10.3.3 (252761264e)

OS: Pop!_OS 22.04

Browser: Firefox 123.0.1

Grafana platform?

Docker

Datasource(s)?

No response

tonypowa commented 2 months ago

This issue is a test copy of an issue in another repo. Original issue: https://github.com/grafana/grafana/issues/#85044

moxious commented 2 months ago

Summary: The issue, opened by tonypowa, is about a malfunction where a clickable <a href="javascript:void 0"> HTML tag in the GraphiQL editor unexpectedly navigates away from the page, despite its intent to be a non-navigational link. This behavior is inconsistent with standard HTML behavior, and reproduction steps were provided for a Grafana v10.3.3 environment on Firefox.

moxious commented 2 months ago

Hello @tonypowa, thanks for reporting this issue. Based on the information provided, it seems this issue may be best addressed by the Frontend Platform project team as it deals with how a-tags are handled in the UI and seems specific to Grafana's frontend environment. I've labeled this issue accordingly to ensure it gets reviewed by the right team.

moxious commented 2 months ago

Elaboration:

Thank you for providing detailed information about the behavior you've encountered. To better assist you with this issue, could you please provide a few additional pieces of information? Here are some questions and suggestions that would help us understand the issue more precisely:

Error Console Logs: Are there any error messages or logs in the browser's console when the navigation occurs after clicking the link? This can be accessed in most browsers by right-clicking on the web page, selecting 'Inspect', and navigating to the 'Console' tab.
Event Handlers: Is there a possibility that there are any JavaScript event handlers tied to the link that might be causing the navigation? Please check if any 'click' event listeners are attached to the anchor tags and share that code with us.
Reproduction Repository: If possible, can you provide a minimal reproduction repository or a CodeSandbox that demonstrates the issue? This would greatly help in debugging the problem.
Network Activity: When the issue occurs, is there any unexpected network activity? You can check this by inspecting the 'Network' tab in the browser developer tools.
Screenshots/Screen Recording: A screenshot or a screen recording of the issue as it occurs might also give us some visual clues about what's happening.

Once you have gathered this additional information, please update the issue, and we will take a closer look at the problem. Thank you for your contribution to the GraphiQL community!

moxious / triage