Not working with Content tabs

[dmaggi]

When adding draw.io diagrams into a content tab like this:

=== "Tab1"
    ![](img/diagram1.drawio)

=== "Tab2"
    ![](img/diagram2.drawio)

When viewing the diagrams in the web browser, only the diagram on Tab 1 loads initially.
If I switch to Tab 2, its diagram does not appear unless I reload the page (F5). After reloading, the behavior flips: Tab 2 loads correctly, but switching back to Tab 1 shows nothing until I reload again.

It seems that the diagrams are only rendered on the tab that is visible during page load, and switching tabs does not trigger a re-render.

How can I fix this behavior?
Is there a JavaScript solution that forces the diagram to re-render when switching tabs?

Thanks!

[tuunit]

@dmaggi interesting wasn't aware of that issue but I yeah it's loaded dynamically and therefore the rendering isn't tiggered.

This should solve your problem:

https://github.com/tuunit/mkdocs-drawio?tab=readme-ov-file#material-integration

If it resolves it let me know and if not, I can try to reproduce and debug the issue

[dmaggi]

Hi @tuunit! thanks for your quick response!

I tested this and other possible solutions, but I'm not a frontend developer, so I don't really know how to trigger this reload when changing tabs. I tested it out again this morning, as I realized that my previous tests were on a "not basic/conventional" project.

So I ran it on a clean mkdocs project and couldn't make it work either :/

[tuunit]

Hi @tuunit! thanks for your quick response!

I tested this and other possible solutions, but I'm not a frontend developer, so I don't really know how to trigger this reload when changing tabs. I tested it out again this morning, as I realized that my previous tests were on a "not basic/conventional" project.

So I ran it on a clean mkdocs project and couldn't make it work either :/

Just to make sure, you added a file with the reload javascript code and you added it to the extra_javascript: block to your mkdocs config pointing to that file?

so I don't really know how to trigger this reload

It is subscribing to the document / body. So any event / change on the body should trigger the reload 🤔

[dmaggi]

Just to make sure, you added a file with the reload javascript code and you added it to the extra_javascript: block to your mkdocs config pointing to that file?

Hi, I think i did all what you asked; but still same behavior

[tuunit]

document.addEventListener('change', (event) => {
  // Check if the target is a pymdownx tab input
  if (event.target.matches('.tabbed-set > input')) {
    GraphViewer.processElements()
  }
});

@dmaggi this solve your problem. Its a bit of a brute force solution as it listens to ALL events will retrigger the processing of GraphViewer elements every time you click a tab but it works

[tuunit]

@dmaggi added it to the readme:

https://github.com/tuunit/mkdocs-drawio?tab=readme-ov-file#using-tabs-pymdownxtabbed