Bug on application running in browser tab on page load

[Javiani]

🐛 bug report

Description of the problem

On page load, the app has issues on rendering my demo by not running the js code as expected, sometimes rendering a 'undefined' instead of html.
I'm using a library called jails-js that I built myself, and that lib works on several environments and browsers, but not on codesandbox browser tab.

I suspected that was something related to that lib I wrote, but if I click on "Open in New Window" option, the application runs just as expected, so I guess it might be something related to the browser iframe tab. Or I had to wait for the entire page load and then remove any url hash parameters and hit enter again in the location bar on browser tab so I can see the application working as expected.

How has this issue affected you? What are you trying to accomplish?

I wanted to use codesandbox as the official repo for all screencasts and demos codes for my project but I can't right now.

Link to sandbox: https://codesandbox.io/s/2v3815oorj

Your Environment

Software	Name/Version
Сodesandbox	N/A
Browser	Chrome Version 80.0.3987.132 (Official Build) (64-bit)
Operating System	Mac OS Mojave

[garethx]

The error in the console is: "Blocked autofocusing on a form control in a cross-origin subframe." Removing the line 'e.delegateTarget.querySelector('.edit').focus()' and it seems to work ok.

[Javiani]

Hi @garethx,

I guess that's not the problem, but I did it anyway, still not working. I didn't mentioned before but that behavior happens with others sandboxes too. Like:

• https://codesandbox.io/s/xllqj36q7w
• https://codesandbox.io/s/vymv5kwkl

I'm quite sure that it seems to be something related to both, the way codesandbox serve the app in the browser tab AND the way my library renders the application on page load.

I could only reproduce that kind of error on codesandbox, I have some apps in production with that library already and I didn't find any issues like that...

I'm also opening this issue because I got the feeling that this could break some other apps with other libraries too. I can't remember exactly which other sandbox it was, but I remember that somebody share with me a link and the example in React that was not working, so I follow those steps I mentioned before and it begin to work again...

It's also possible that I'm doing something that I didn't supposed to do on my side aswell..

[garethx]

See https://codesandbox.io/s/jails-todomvc-application-8p78f implementing the suggested change I mentioned above, does that work for you?. I don't get an error in your other two linked sandboxes.

[Javiani]

That's weird...
It doesn't work... my example has that part commented already and still the same...
I think I'm gonna create new sandboxes and copy/past the code...

@garethx, you said "Blocked autofocusing on a form control in a cross-origin subframe." where that error is shown? Do you see that on console tab from codesandbox application or in chrome?

[Javiani]

. I don't get an error in your other two linked sandboxes.

I removed the autofocus from html, it turns out that the html property was raising that error you've mentioned...

The other two sandboxes seems to be working because they are rendering, but for me they don't behave as expected, because the first interaction forces a refresh and then it begin to work.

In the todomvc example you can see that strange behavior, if you add a item and then hit Enter, it will refresh iframe and then show the item added. Sometimes when I did that the undefined error happens, so it's very intermittent.

@garethx , I guess you can close this one, I'm almost sure that's something related to my library, I'll investigate it.

UPDATED: I also can't reproduce the error when chrome inspect tab is opened.

Thank you very much for your support!!