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

"#id" Syntax Not Working for Flowchart Click Events #1218

Closed
commonsguy opened this issue Jan 23, 2020 · 3 comments · Fixed by #1222
Closed

"#id" Syntax Not Working for Flowchart Click Events #1218

commonsguy opened this issue Jan 23, 2020 · 3 comments · Fixed by #1222
Assignees
Labels
Graph: Flow Type: Bug / Error Something isn't working or is incorrect

Comments

@commonsguy
Copy link

#689 suggests that "#id" should work in click to jump to another portion of the current page. This does not appear to be working.

To Reproduce

Steps to reproduce the behavior:

  1. UnZIP MermaidIdSyntaxIssue.zip, which will give you a mermaid-test.html file, pulling in https://unpkg.com/[email protected]/dist/mermaid.min.js for the Mermaid distribution. In the first diagram, it contains:
click predstate0 "#state-PromptedForLocationServices"

to have a click jump the node with the id of state-PromptedForLocationServices.

  1. Load that in your favorite Web browser (tested on Chromium and Firefox).

  2. In the first flowchart diagram, click the "PromptedForLocationServices" bubble (bottom of left-most branch).

Expected behavior

To jump to the "2. PromptedForLocationServices" heading, the way that Test link #2 does at the bottom of the page, as that refers to the same id:

<a href="#state-PromptedForLocationServices">Test link #2</a>

Actual behavior

On Chromium, it goes to about:blank#blocked. On Firefox, the click seems to be ignored.

Note that if you replace "#state-PromptedForLocationServices" with a regular URL (e.g., "https://commonsware.com"), clicking the flowchart node works, so clicking in general is fine.

Desktop (please complete the following information):

  • OS: Ubuntu 19.10
  • Browser: Chromium 79.0.3945.79, Firefox 72.0.1
@commonsguy commonsguy added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Jan 23, 2020
@jgreywolf
Copy link
Contributor

It looks like this could be due to security settings (see documentation) . Specifically, if securityLevel='strict' then all links will be changed to about:blank.

However, if you changed it to a plain URL and everything worked fine, then I'm a little less sure...

@commonsguy
Copy link
Author

I have:

<script>mermaid.initialize({startOnLoad:true,securityLevel:'loose'});</script>

So, AFAIK, I already have it set to loose.

@GDFaber
Copy link
Member

GDFaber commented Jan 24, 2020

There seems to be a problem concerning click events via function names as well, I'll open a new issue for that. But since this is issue also about click events in flowcharts, I also assign me here.

@GDFaber GDFaber self-assigned this Jan 24, 2020
@GDFaber GDFaber added Graph: Flow and removed Status: Triage Needs to be verified, categorized, etc labels Jan 26, 2020
@github-actions github-actions bot locked and limited conversation to collaborators Jan 27, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Graph: Flow Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants