OrchardCore icon indicating copy to clipboard operation
OrchardCore copied to clipboard
verified publisher icon OrchardCMS

"Blocked attempt to show a 'beforeunload' confirmation panel" when navigating away from MenuPart editor

Open Piedone opened this issue 4 years ago • 4 comments

Describe the bug

To Reproduce

This is vague and needs more investigation since I see the actual browser log entry only during UI tests (here). Thus I don't have a solid repro, but the issue does come up reliably if you run that test. So, supposedly:

  1. Navigate to a MenuPart editor, e.g. the editor of Main Menu when you've set up the site with the blog recipe.
  2. Don't do anything (?) or perhaps only edit the Title (but not the menu items, don't change their order, for example).
  3. Do anything that causes you to navigate away.
  4. Note a browser console entry similar to this one in Chrome:
3/21/2022 7:49:13 PM UTC | Severe | intervention | https://localhost:9024/Admin/Contents/ContentItems/4nqq58rc9skbf6pdnmhzn3mmx7/Edit?admin=-1181914940 - Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had a user gesture since its load. https://www.chromestatus.com/feature/5082396709879808

This is because of the window.onbeforeunload code in MenuPart.Edit.cshtml (though it ought to not display a dialog unless the menu items' order is changed). See the linked https://chromestatus.com/feature/5082396709879808 and https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent.

Note that TaxonomyPart.Edit.cshtml has the same issue.

Expected behavior

No console log entry.

Piedone avatar Mar 21 '22 21:03 Piedone

Time to move away from JQuery UI.

Skrypt avatar Mar 23 '22 02:03 Skrypt

Do you think that's causing this, not our custom code?

Piedone avatar Mar 23 '22 12:03 Piedone

To me, it seems to be part of the component itself.

Skrypt avatar Mar 23 '22 16:03 Skrypt

@Piedone can this reproduced in Edge, so I can check and submit a PR for it

hishamco avatar Sep 18 '22 11:09 hishamco

Don't do anything (?) or perhaps only edit the Title (but not the menu items, don't change their order, for example).

@Piedone do you mean edit the tilte for menu or menu item?

Do anything that causes you to navigate away.

Can I navigate to any of the admin menus?

FYI I tried to edit "About" menu item, then I click one of the menu items links, nothing show up in the console. Still I'm not sure if this issue reproduced in all the browsers or Chrome only?

hishamco avatar Oct 15 '22 07:10 hishamco

  1. The Title of the menu.
  2. I think so, yes. So, clicking any of the other navigation items on the left should suffice too.
  3. Note that this is about the Menu editor, not the Menu Items'.

As I mentioned in the issue, I couldn't reproduce it manually, only the UI test did it, though both happened in Chrome. UI tests run a blank Chrome profile though (i.e. without my personal settings and extensions like ad blockers) that might affect this. However, you said you could reproduce it in Edge (I assume the Chromium one, so similar environment).

Piedone avatar Oct 15 '22 19:10 Piedone

Could you please run the UI test on Edge, or you could share the test with me then I can reproduce the issue. Seems it's hard to reproduce it manually

hishamco avatar Oct 15 '22 19:10 hishamco

I won't be able to in the next days, but if you checkout the OSOCE solution, the test linked in the issue will be there. If you change the [Theory, Chrome] attributes on it to [Theory, Edge] then it should be run in Edge (but we didn't use Edge, this happened under Chrome).

Piedone avatar Oct 15 '22 19:10 Piedone

Check out https://github.com/OrchardCMS/OrchardCore/pull/11194 and run the TestAdminPagesAsMonkeyRecursivelyShouldWorkWithAdminUser test without the configuration.AssertBrowserLog assignment. You should get this error within a few seconds. (If you attach the debugger and break at exceptions, you can also stop the test at that point.)

Piedone avatar Oct 26 '22 23:10 Piedone

@Piedone I run the test in both Edge & Chrome but I can't reproduce the issue

BTW is there an option to see and trace the current browser page, coz I didn't see any browser instance even I choose debug the test

hishamco avatar Dec 26 '22 17:12 hishamco

You should see the browser window when you use the default config of the sample project. Otherwise, set false here: https://github.com/Lombiq/UI-Testing-Toolbox/blob/a874a575e177016a56cf846a12371b730e0f0298/Lombiq.Tests.UI.Samples/UITestBase.cs#L56

Piedone avatar Dec 26 '22 18:12 Piedone

I'm successfully execute the test, this time with browser instance opened, while the monkey testing finished nothing show up or should I open the console logs?

hishamco avatar Dec 27 '22 09:12 hishamco

Note that the bug doesn't always reproduce, it comes up randomly. So you may need a couple of tries to see the test fail with an exception that the browser log contains this error. (Be sure to remove the configuration.AssertBrowserLog assignment as I mentioned under https://github.com/OrchardCMS/OrchardCore/issues/11420#issuecomment-1292780872, otherwise it'll ignore the error.)

Piedone avatar Dec 28 '22 02:12 Piedone

(Be sure to remove the configuration.AssertBrowserLog assignment as I mentioned under https://github.com/OrchardCMS/OrchardCore/issues/11420#issuecomment-1292780872, otherwise it'll ignore the error.)

I already remove it. I may need to try this test 10 times at least and see if the exception show up

hishamco avatar Dec 28 '22 21:12 hishamco

(Be sure to remove the configuration.AssertBrowserLog assignment as I mentioned under https://github.com/OrchardCMS/OrchardCore/issues/11420#issuecomment-1292780872, otherwise it'll ignore the error.)

I already remove it. I may need to try this test 10 times at least and see if the exception show up

hishamco avatar Dec 28 '22 21:12 hishamco

I can't reproduce this now either, neither locally nor in CI. Perhaps a Chrome update or the update to Bootstrap 5 fixed this somehow. Anyway, good bug, fixed itself!

Piedone avatar Jan 09 '23 01:01 Piedone