when using multiple diagrams on the same page, interactions via bindFunctions only end up working on one instance

vesper8 commented 1 year ago

Description

I am using the very latest version mermaid@10.1.0

I have two separate flowcharts on the same page, both of them make use of interactions (click functions as well as tooltips)

I've noticed that there is essentially a race condition and only one of the two diagrams end up being able to use interactions

Steps to reproduce

Have two different diagrams with distinct elements and interactions Call initialize and render for each diagram Notice that interactions only work on one instance, but never both

Screenshots

No response

Code Sample

In one component

        mermaid.initialize({
          startOnLoad: false,
          securityLevel: 'loose',
        });

        const element = document.getElementById('mermaid-project-tree');

        if (element) {
          await mermaid
            .render('mermaid-project-tree-svg', this.diagram) //
            .then(({ svg, bindFunctions }) => {
              element.innerHTML = svg;
              bindFunctions(element);
            });
        }

In another component

        mermaid.initialize({
          startOnLoad: false,
          securityLevel: 'loose',
        });

        const element = document.getElementById('mermaid-requirements-tree');

        if (element) {
          await mermaid
            .render('mermaid-requirements-tree-svg', this.diagram) //
            .then(({ svg, bindFunctions }) => {
              element.innerHTML = svg;
              bindFunctions(element);
            });
        }



### Setup

- Mermaid version:  mermaid@10.1.0
- Browser and Version: [Chrome, Edge, Firefox] Chrome 112

### Additional Context

Maybe I am going about this wrong and this is not the proper way to have more than one diagram that uses interactions on the same page. If so, some advice or an example would be much appreciated!

Many thanks