I'm running into issue where it seems as if when I first click a tab of a Tab Container to show its contents, the DOM doesn't immediately "detect" the elements of the newly rendered content. Here are 4 screenshots where I navigate back and forth between tabs in order.
So I'm using the Markdown component to inject and run some JS code whenever the 'Checks' tab's content loads. This is done by writing an img element in the Markdown's source text and giving this img element an onload script, all as HTML. The key part of the JS code is running a document.querySelectorAll to find table rows. I'm also using the JS code for console.log()'s.
When I first navigate to the 'Checks' tab in image #2, the querySelectorAll does not appear to find the 3 table rows shown.
However when I navigate to any other tab and then back to the 'Checks' tab in image #4, the querySelectorAll now finds the 3 table rows (23 vs. 20).
So I imagine there's some kind of race condition happening where the contents of a tab are not immediately rendering for the querySelectorAll to be able to find certain elements. Is there any way around this?