Description
If a user clicks the “Start Video” text below the video button, a js error is thrown, crashing the Zoom component and forcing a page reload. Clicking anywhere above the text on the button works fine, its only clicking the text itself that throws the error.
Error
Target Container is not a DOM element.
Which version?
web sdk 1.7.2
To Reproduce(If applicable)
Join a zoom meeting. Click on “Start Video” text at the very bottom of the button.
Screenshots
If applicable, add screenshots to help explain your problem.
Hmm. I’ve just dropped the SDK into my app as described by the setup instructions. It is running alongside my application code which is using React 16.12.0.
Here’s the gist of the component I built to render the Zoom component:
I added that property, but it did not resolve the issue.
I did some more debugging after noticing the markup for the web ui served directly on zoom’s site is different, and noticed that the Start Video text is contained in an anchor tag with an href of “#”. If I manually edit the dom after zoom loads and remove the href attribute entirely, clicking it does not throw the error and everything works as intended.
Here’s the rendered HTML for that button, and you can see the a#join_text with the href attribute.
We are having this same issue with the latest Web SDK 1.7.4. We have actually been seeing this issue for some time, but I was never able to narrow it down because people were reporting it so intermittently. Thanks, @chrisapolzon for solving this mystery for me!
“Manually editing the DOM” isn’t really a solution, but I will try to see if there is some post-processing or CSS I can do to work around this.
However, until then it is a major problem for our customers and I hope that Zoom can fix the issue on their side.
I can’t really share code because it is for a client and is integrated into their software. However, the SDK is integrated into a large React app. Because of dependency conflicts, I could not use the NPM version and the Zoom SDK is contained within an iFrame and imported via the Zoom CDN.
I was not able to reproduce this problem consistently until I realized that it was being caused by clicking on the TEXT inside the button element instead of the image. If you look at the code that @chrisapolzon posted above you will see that the text for “Start Video” is contained inside an anchor tag <a>. I don’t know why this is the case as the whole thing is already inside a <button> tag. In fact, if you look at the button for the Audio button right next to it, the text is contained within a simple <span> tag.
I don’t know why the two buttons would be differently rendered, but clicking on anchor tag with the text in it causes the problem every time. I think I may be able to work around this for now with some CSS like the following:
a#join_text: {
pointer-events: none;
}
However, it would be better if Zoom would remove this anchor tag as it seems to serve no purpose.