Potential Bug: Modal on Layout page causing content page to freeze

Wappler General Bugs
1

Wappler Version : 6.1.0
Operating System : Mac M1
Server Model: NodeJS
Database Type: MySQL
Hosting Type: Docker

Expected behavior

A modal is triggered (the modal is in the layout page) from the content page. I close this modal and should be able to navigate the app as normal.

Actual behavior

When I close the modal, the content page freezes (in terms of scroll, I am unable to scroll up or down but I can still click around the page).

The issue resolves itself if I refresh the page.

How to reproduce

  • Add a modal to the layout page of a node app.
  • Open this modal from the content page (ensure this content page has the necessary length that would normally allow for a scroll).
  • Close the modal and then try and scroll.

I’ve been able to replicate this on two browser types (Chrome, and Safari).

2

Are you talking about bootstrap modal?

What version of bootstrap exactly and are you on the beta or stable channel?

It you have a simple test case online and provide us with a link, it will be easier to investigate.

3

Hi George and sorry for the delay.

It’s a Bootstrap 5 Modal on stable channel.

It’s happening in a secure section, but I’ll try to find time to recreate the situation with something that’s shareable if you are unable to recreate it.

4

Hey!
I tried the other day to reproduce it but working fine on 6.1.0 (forgot to reply, sorry)

You can check the exact version of BS by inspecting it:

Inspect page - network - reload page
image

I guess, both files should have same version (at least, one report was related to that)

Also check if all your files are up to date:

image
image788×720 28.5 KB

5

Here is the hack I used to fix this issue, which might help in finding the root cause:

  function afterImportModalLoad() {
    //Hack to deal with overflow hidden on body
    let el = document.getElementById('main');
    el.removeAttribute('data-bs-overflow');
    
  }
1 Like
6

Thanks @mebeingken for this, glad to have someone else experience it as that normally expedites the fix and your snippet will hopefully make finding the bug quick for the team.

7

I tested the exact same config as you explained but the modal, its overlay and overflow on the page work perfectly fine. I’m on the beta channel the latest app connect version.

Can you post the versions of the modal, bootstrap and app connect javascript files you have on your site?

8

Bootstrap is: v5.3.2
I’m on Stable channel, not beta
Bootstrap 5 modal is v1.0.2
App Connect Version 1.14.12

I was just able to recreate the issue myself now (in a password protected area) so not publicly shareable.

I’ve reviewed console and see no errors on either the content or layout page (where the modal exists).

9

Bump.

@Teodor I can PM you a link plus login details for you to see this in action as I can reproduce it pretty reliably.

11

Bump. I can reproduce this eacah and every time on a certain page - I'd like a solution here or some guidance on how/what to debug for. @patrick I am happy to share access so you can reproduce the issue (as you are tagged).

12

Can you scroll if you select the option 'No Backdrop' on the modal?

image

13

Hi Cheese, thanks for the reply.

When the modal appears the background can still be scrolled - as expected and no bugs/issue at this point.

The freeze happens when I close the modal, the background then becomes unresponsive in regards to scroll but I can still click on buttons.

I just tried playing with the No Backdrop selected and it didn't change anything in regards to the issue.

14

What happens if you put the modal source right at the end of the page (ie after the Main container and the last code block before the ac:route meta entry)?

EDIT.
Sorry see you said it is on a Layout...

So like this...

image
image1449×172 28.1 KB

15

That's actually where it was currently located (for testing purposes - but have now moved it to the top).

It was also originated on the layout page (as it's triggered from multiple pages) but I've also tested placing it on the content page.

mebeingken script works - but would like the team to find/fix the issue so i don't need to use a script.

16

Definitely a weird one as we don't seem to have the same issue despite using multiple modals in our pages, both Layout and Content.

Just edited my above response to acknowledge that.

1 Like
17

The modal is triggered by a flow based on the outcome of a server connect. Maybe that's the nuance here?

I also have many modals / convasses that appear on pages but do not cause this issue. However in this case I can replicate it 100% of the time - so if the team are willing, will be able to check this out directly.

18

The above example in my edit is the same, fired by a Flow, that checks a set of Conditions, then shows based on the result.

Yeah definitely one for the Team! Sorry I couldn't help.

1 Like
19

I appreciate you trying anyway - thank you.

1 Like
20

@mgaussie are you also using a preloader?

Check this and also pattrick's post