Upgrading to 1.2.0+ disables admin UI

[richardcalahan]

Description

After upgrading to 1.2.0+ the admin UI is completely disabled for entries that contain an oEmbed field. This happens only after the entry is saved with a value for the field. Once the iframe preview is visible, the UI becomes unresponsive.

It seems as if javascript is completely disabled at this point. Image previews don't load, field tabs don't work, fields themselves are not clickable. The problem persists after reloading the page.

Environment

[reganlawton]

Is there any errors in your dev console for JavaScript? @richardcalahan ? Just wanting to see if it might be a conflict with new Craft 3.4 updates

[reganlawton]

The iframe is also pulled using AJAX so if the JS is failing then it would be prevent the iframe from loading the preview

[richardcalahan]

There are no javascript errors in the console. The preview still loads, oddly enough.

[reganlawton]

So the preview kids but the rest of the page freezes up?

[richardcalahan]

I can navigate in the left sidebar, but anything other than a proper href loses functionality.

[reganlawton]

@richardcalahan I'm running using the latest version of both CraftCMS and Oembed and cant seem to see an issue. Can I ask which URL you using in the field? Do you possibly on the CraftCMS discord or discord itself? Maybe we can connect and continue the troubleshooting there? Otherwise my email is reganlawton92gmail.com if you have a staging site that have the issue I might be able to see or even the project config and composer.json to rebuild the backend to troubelshoot

[richardcalahan]

I'm using Oembed for Vimeo videos. OK, I'll test more on my end too. Will let you know what I find.

[reganlawton]

Please do. I'll keep this open for abit longer. If its a plugin conflict please also let me know @richardcalahan

[nickcobley]

I can reproduce this issue too, I've spent all morning troubleshooting it.

I'm coming from v1.18 and the problem is introduced for me in version 1.2.0.

Note for me this breaks the UI both in the control panel and when rendering it on the frontend in the same way as described above.

I've run out of time to troubleshoot this today, but I think I may have just found the problem.

Prior to 1.2.0, it was rendering an iframe like this:

<iframe 
	width="480" 
	height="270" 
	src="https://www.youtube.com/embed/kZd7InxiOgU?feature=oembed" 
	frameborder="0" 
	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
	allowfullscreen>
</iframe>

Then with 1.2.0:

<iframe 
	width="480" 
	height="270" 
	src="https://www.youtube.com/embed/kZd7InxiOgU?feature=oembed" 
	frameborder="0" 
	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
	allowfullscreen=""
/>

Note that it's closing the iframe with />, which as far as I know is is invalid, should be </iframe>

I can provide more info later to try reproduce this, no problem to jump on discord either.

[reganlawton]

Great find! I’m working stupid late on a deadline tonight but will try get it actioned tomorrow.

It might be due to how different browser render and that’s why I didn’t get the issue. I’m also wondering if it’s due to the version of embed plugin 🧐. I can ofcourse do a regex replace on the > worst case.

What browser and version and OS are you using? Find me on CractCMS discord to chat.

[nickcobley]

I'm testing in latest Chrome on OS X 79.0.3945.130, I've also tested and can reproduce in Safari and Firefox. My feeling is that there is maybe some edge case that causes it to work in some cases and not in others. I swear I had it working at some point but never pinned down why.

Looking at my embed plugin, seems to remain the same version. 3.4.2 between updates to oembed.

I'll leave you alone while you battle deadlines but if you need me to pop on to Discord to chat just shout. I'll in the meantime check if I can reproduce the issue in another site.

[nickcobley]

Yep, can easily reproduce on another site.

[reganlawton]

Can I please get steps to reproduce? It’s 1230am AEST currently and I’m up at 5am to finish deadline piece but after that I should be able to look into the issue around 12pm AEST and if I can reproduce and have your testing guide I can debug trace what’s going on and get a patch ASAP 👍😁

[nickcobley]

Leg me see if I can reproduce on a vanilla craft install first, want to be sure my steps will actually reproduce it for you without other plugins etc interfering. I'm on the West Coast so still a few hours before it's the wrong side of midnight, I'll try get it done for you tonight, if not no rush on my part, it's not holding anything up.

[reganlawton]

I pinged you a request on Discord feel free to grab me on there for a chat tomorrow anytime 👍 or just post here 😂

[nickcobley]

Okay created a fresh install of Craft 3.4.3 with only oembed 1.2.2 and reproduced the issue right away, works with any Youtube URL I think, or at least the handful I tried.

So to reproduce:

1. Create an oembed field
2. Create an entry then add any Youtube URL, I used https://www.youtube.com/watch?v=aqz-KE-bpKQ
3. Save the entry, then open it again and make sure your on a tab that renders the preview to the page
4. You should now find most of the UI on the page is broken, for example, try click on the entry versions dropdown, preview or share, nothing will happen. No console errors will display, just a dead page

The above can be reproduced for me in lastest Chrome, Firefox or Safari on OS X.

If you need me to send you a db dump and composer.json to reproduce this just ping me on discord.

[reganlawton]

@nickcobley I can see how I missed this in testing as it all works still. The iframe self closing prevents DOM loading cos it rended as everything after is inside the iframe. Easy fix and I'll get it right out.

[nickcobley]

Legend, confirmed fixed for me here. Thanks so much for the quick fix on this.